Use jTopo to add mouse events to elements drawn in Html5 Canva_html5 tutorial tips

When using Html5, things drawn on Canvas cannot respond to mouse events, but it is very simple to add events using jTopo. The effect is as follows:



Code example:

Copy code

The code is as follows:

var node = new JTopo.Node("Hello") ;
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = 'Press the right button' ;
}else if(event.button == 1){
node.text = 'Press the middle button';
}else if(event.button == 0){
node. text = 'Press the left button';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = 'Release the right button';
}else if(event.button == 1){
node.text = 'Release the middle button';
}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") ;
});