Comment: Things drawn on Canvas cannot correspond to mouse events, but using jTopo to add events is very simple. There is an example below, you can refer to it
When using Html5, things drawn on Canvas cannot correspond to mouse events, but adding events using jTopo is very simple, with the following effect:Code example:
var node = new JTopo.Node("Hello");
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = 'right-click';
}else if(event.button == 1){
node.text = 'Press the middle key';
}else if(event.button == 0){
node.text = 'Press the left button';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = 'Release right click';
}else if(event.button == 1){
node.text = 'release the middle key';
}else if(event.button == 0){
node.text = 'release the left button';
}
});
node.click(function(event){
console.log("click");
});
node.dbclick(function(event){
console.log("Double-click");
});
node.mousedrag(function(event){
console.log("Drag");
});
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
});
node.mouseout(function(event){
console.log("mouseout");
});