在官方文档中看到鼠标悬停事件有,mouseover和mouseout,我就象征性的写进代码里,但是问题出来了,悬停事件和点击画线操作产生了冲突,只要悬停,就不能画线,只要画线,就不能悬停,后来我将悬停的代码写进了jtopo-0.4.8-min.js中去了,
首先,在jtopo-0.4.8-min.js中Ctrl+F找mousemove,注意:里面有很多mousemove,找到下面一段代码。
this.mousemoveHandler = function(a) {
this.isMouseOver = !0,
this.dispatchEvent("mousemove", a) //如果右键操作框显示,则悬停隐藏,如果右键操作框隐藏,则悬停显示
}
找到后将要悬停的信息添加到函数里就可以了,这边需根据自己的不同需求自己写,比如说,我这边要求是鼠标悬停在node节点上的时候显示详情,所以我是这样写的。
this.mousemoveHandler = function(a) {
this.isMouseOver = !0,
this.dispatchEvent("mousemove", a) //如果右键操作框显示,则悬停隐藏,如果右键操作框隐藏,则悬停显示
//鼠标悬停显示详情
// console.log('a',a)
// console.log('this',this);
if (a.target.elementType == 'node'){
if (document.querySelector("#contextmenu").style.display == 'block') {
$("#contextDetails").hide();
$("#nodeHub").hide();
} else if (this.devType != 'hub') {
$("#imgVal").attr('src',imgUrl+"/js/topo/images/" + this.imageName);//这些数据this里面原本没有,通过jtopo自定义属性一个一个添加进去的。
$("#nameVal").val(this.devName);
$("#ipVal").val(this.ip);
$("#statusVal").val(this.status);
$("#macVal").val(this.mac);
$("#versionVal").val(this.version);
$("#locationVal").val(this.location);
$("#timeVal").val(this.loginTime);
$("#contextDetails").css({
top: event.pageY - 55,
left: event.pageX - 230
}).show();
}
}
差不多用下面的替换上面就可以了,纯个人需求所写,有什么问题可以一起讨论