why does cytoscape nodes need two taps instead of one to fire click event
![Multi tool use Multi tool use](http://sgv.ssvwv.com/sg/ssvwvcomimagb.png)
Multi tool use
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
add a comment |
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
add a comment |
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
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
javascript jquery vue.js cytoscape.js
edited Jan 2 at 13:49
FTlemsani
asked Jan 2 at 11:26
FTlemsaniFTlemsani
193
193
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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>
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
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
add a comment |
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>
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
add a comment |
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>
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>
edited Jan 5 at 14:40
answered Jan 3 at 5:32
![](https://i.stack.imgur.com/A73tJ.jpg?s=32&g=1)
![](https://i.stack.imgur.com/A73tJ.jpg?s=32&g=1)
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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