why does cytoscape nodes need two taps instead of one to fire click event

Multi tool use
Multi tool use












1















I am building a network view using cytoscape.js and need to catch tap event on nodes. The event fires very well on edges and background but needs two taps to get fired on nodes. I used both 'click' and 'tap' event like below but still can't fire the event on first tap. Any clues !?



cy.on('tap',function(e){
// console.log(e)
console.log('click detected ', e)
})


Thank you










share|improve this question





























    1















    I am building a network view using cytoscape.js and need to catch tap event on nodes. The event fires very well on edges and background but needs two taps to get fired on nodes. I used both 'click' and 'tap' event like below but still can't fire the event on first tap. Any clues !?



    cy.on('tap',function(e){
    // console.log(e)
    console.log('click detected ', e)
    })


    Thank you










    share|improve this question



























      1












      1








      1








      I am building a network view using cytoscape.js and need to catch tap event on nodes. The event fires very well on edges and background but needs two taps to get fired on nodes. I used both 'click' and 'tap' event like below but still can't fire the event on first tap. Any clues !?



      cy.on('tap',function(e){
      // console.log(e)
      console.log('click detected ', e)
      })


      Thank you










      share|improve this question
















      I am building a network view using cytoscape.js and need to catch tap event on nodes. The event fires very well on edges and background but needs two taps to get fired on nodes. I used both 'click' and 'tap' event like below but still can't fire the event on first tap. Any clues !?



      cy.on('tap',function(e){
      // console.log(e)
      console.log('click detected ', e)
      })


      Thank you







      javascript jquery vue.js cytoscape.js






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 2 at 13:49







      FTlemsani

















      asked Jan 2 at 11:26









      FTlemsaniFTlemsani

      193




      193
























          1 Answer
          1






          active

          oldest

          votes


















          0














          You always need to unbind the event before you bind it, otherwise you may have some trouble with some events firing twiche.



          Also, you should specify, which elements you want to bind the event on, so either 'node', 'edge' or everything. That way your event is more accurate.






          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>








          share|improve this answer


























          • thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

            – FTlemsani
            Jan 4 at 10:31











          • Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

            – Stephan T.
            Jan 4 at 11:37











          • I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

            – FTlemsani
            Jan 4 at 13:41













          • Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

            – Stephan T.
            Jan 5 at 14:36






          • 1





            Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

            – maxkfranz
            Jan 7 at 20:02











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005493%2fwhy-does-cytoscape-nodes-need-two-taps-instead-of-one-to-fire-click-event%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          You always need to unbind the event before you bind it, otherwise you may have some trouble with some events firing twiche.



          Also, you should specify, which elements you want to bind the event on, so either 'node', 'edge' or everything. That way your event is more accurate.






          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>








          share|improve this answer


























          • thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

            – FTlemsani
            Jan 4 at 10:31











          • Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

            – Stephan T.
            Jan 4 at 11:37











          • I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

            – FTlemsani
            Jan 4 at 13:41













          • Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

            – Stephan T.
            Jan 5 at 14:36






          • 1





            Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

            – maxkfranz
            Jan 7 at 20:02
















          0














          You always need to unbind the event before you bind it, otherwise you may have some trouble with some events firing twiche.



          Also, you should specify, which elements you want to bind the event on, so either 'node', 'edge' or everything. That way your event is more accurate.






          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>








          share|improve this answer


























          • thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

            – FTlemsani
            Jan 4 at 10:31











          • Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

            – Stephan T.
            Jan 4 at 11:37











          • I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

            – FTlemsani
            Jan 4 at 13:41













          • Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

            – Stephan T.
            Jan 5 at 14:36






          • 1





            Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

            – maxkfranz
            Jan 7 at 20:02














          0












          0








          0







          You always need to unbind the event before you bind it, otherwise you may have some trouble with some events firing twiche.



          Also, you should specify, which elements you want to bind the event on, so either 'node', 'edge' or everything. That way your event is more accurate.






          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>








          share|improve this answer















          You always need to unbind the event before you bind it, otherwise you may have some trouble with some events firing twiche.



          Also, you should specify, which elements you want to bind the event on, so either 'node', 'edge' or everything. That way your event is more accurate.






          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>








          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>





          var cy = (window.cy = cytoscape({
          container: document.getElementById("cy"),

          boxSelectionEnabled: false,
          autounselectify: true,

          style: [{
          selector: "node",
          css: {
          content: "data(id)",
          "text-valign": "center",
          "text-halign": "center",
          height: "60px",
          width: "60px",
          "border-color": "black",
          "border-opacity": "1",
          "border-width": "10px"
          }
          },
          {
          selector: "$node > node",
          css: {
          "padding-top": "10px",
          "padding-left": "10px",
          "padding-bottom": "10px",
          "padding-right": "10px",
          "text-valign": "top",
          "text-halign": "center",
          "background-color": "#bbb"
          }
          },
          {
          selector: "edge",
          css: {
          "target-arrow-shape": "triangle"
          }
          },
          {
          selector: "edge[label]",
          css: {
          label: "data(label)",
          "text-rotation": "autorotate",
          "text-margin-x": "0px",
          "text-margin-y": "0px"
          }
          },
          {
          selector: ":selected",
          css: {
          "background-color": "black",
          "line-color": "black",
          "target-arrow-color": "black",
          "source-arrow-color": "black"
          }
          }
          ],
          layout: {
          name: "circle"
          }
          }));

          var info = [{
          name: "Peter",
          next_op_name: "Claire"
          },
          {
          name: "Claire",
          next_op_name: "Mike"
          },
          {
          name: "Mike",
          next_op_name: "Rosa"
          },
          {
          name: "Rosa",
          next_op_name: "Peter"
          }
          ];

          cy.ready(function() {
          var array = ;
          // iterate over info once
          for (var i = 0; i < info.length; i++) {
          array.push({
          group: "nodes",
          data: {
          id: info[i].name, // id is name!!!
          label: info[i].name
          }
          });
          array.push({
          group: "edges",
          data: {
          id: "e" + i,
          source: info[i].name,
          target: info[i].next_op_name,
          label: "e" + i
          }
          });
          }
          cy.add(array);
          cy.layout({
          name: "circle"
          }).run();
          });

          // Here is the important part
          cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
          cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
          console.log(evt.target);
          });

          body {
          font: 14px helvetica neue, helvetica, arial, sans-serif;
          }

          #cy {
          height: 100%;
          width: 75%;
          position: absolute;
          left: 0;
          top: 0;
          float: left;
          }

          <html>

          <head>
          <meta charset=utf-8 />
          <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
          <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
          <!-- qtip imports -->
          <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
          <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

          <!-- dagre imports -->
          <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
          <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
          </head>

          <body>
          <div id="cy"></div>
          </body>

          </html>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 5 at 14:40

























          answered Jan 3 at 5:32









          Stephan T.Stephan T.

          1,1891820




          1,1891820













          • thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

            – FTlemsani
            Jan 4 at 10:31











          • Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

            – Stephan T.
            Jan 4 at 11:37











          • I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

            – FTlemsani
            Jan 4 at 13:41













          • Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

            – Stephan T.
            Jan 5 at 14:36






          • 1





            Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

            – maxkfranz
            Jan 7 at 20:02



















          • thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

            – FTlemsani
            Jan 4 at 10:31











          • Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

            – Stephan T.
            Jan 4 at 11:37











          • I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

            – FTlemsani
            Jan 4 at 13:41













          • Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

            – Stephan T.
            Jan 5 at 14:36






          • 1





            Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

            – maxkfranz
            Jan 7 at 20:02

















          thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

          – FTlemsani
          Jan 4 at 10:31





          thank's a lot! But still need to click twice to fire tap event on nodes. I think it is du to the internal working of cytoscape. the first click triggers the start fucntion of edgehandler that allows to draw the edge.

          – FTlemsani
          Jan 4 at 10:31













          Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

          – Stephan T.
          Jan 4 at 11:37





          Nah, the code works with one click for me, are you sure that you have cytoscape and all parts of the code (the unbind etc) in your file?

          – Stephan T.
          Jan 4 at 11:37













          I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

          – FTlemsani
          Jan 4 at 13:41







          I use cytoscape with vue.js. I imported cytoscape with npm, I suppose everything is in there. I write the tap function inside the mounted and tried to do the bind unbind, but did'nt change anything !!

          – FTlemsani
          Jan 4 at 13:41















          Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

          – Stephan T.
          Jan 5 at 14:36





          Well can you provide a reproducable example (via snippet), otherwise it's a needle in a haystack :D

          – Stephan T.
          Jan 5 at 14:36




          1




          1





          Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

          – maxkfranz
          Jan 7 at 20:02





          Events bubble up, just like in the DOM. On a tap of a node, the handler is called once for the node and once bubbled up for the core. Use a selector like @StephanT. suggested, or add listeners directly to particular nodes.

          – maxkfranz
          Jan 7 at 20:02




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005493%2fwhy-does-cytoscape-nodes-need-two-taps-instead-of-one-to-fire-click-event%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          dw9U8I,BkJX9,doozIV,m x9ncAD WhtskJsZFtsNp w,r1E,k93
          6IzwXonxKzB97YIA4c2MWG4sxsAfsFugsWq,Op RmD DzY 5hs8ba3ELyZB,DX N

          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas