vis network常用事件包括
事件 | 描述 |
click | 单击鼠标触发 |
doubleClick | 双击鼠标触发 |
hold | 单击并按住鼠标触发 |
oncontext | 鼠标右键单击触发 |
hoverNode | 鼠标悬停在节点上触发 |
hoverEdge | 鼠标悬停在边上触发 |
blurNode | 鼠标从之前悬停的节点移开触发 |
blurEdge | 鼠标从之前悬停的边移开触发 |
dragStart | 开始拖动时触发 |
dragging | 正在拖动节点(多个节点)或视图时触发 |
dragEnd | 结束拖动时触发 |
controlNodeDragging | 拖动控制节点时触发 |
zoom | 放大或缩小视图时触发 |
1.单击鼠标事件
this.network.on("click", (e) => {
// 使用定时器解决单击双击冲突 && 假前真后
timer && clearTimeout(timer);
// 双击鼠标时,单击事件仍会执行两次
console.log("timer1=", timer);
timer = window.setTimeout(() => {
//延时300毫秒执行以下代码-单击事件具体操作
console.log("单击鼠标", e);
}, 300);
});
2.双击鼠标事件
this.network.on("doubleClick", (e) => {
console.log("timer2=", timer);
// 清除已设置的Timeout,避免触发单击事件。
window.clearTimeout(timer);
// 执行双击事件具体操作
console.log("双击鼠标", e);
});
3.长按鼠标事件
this.network.on("hold", (e) => {
// 清除已设置的Timeout,避免触发单击事件。
window.clearTimeout(timer);
console.log("长按鼠标", e);
});
4. 右击鼠标事件
this.network.on("oncontext", (e) => {
console.log("右击鼠标", e);
});
5. 鼠标移入/移出事件
// 鼠标移入节点事件
this.network.on("hoverNode", (e) => {
console.log("鼠标移入节点", e.node);
console.log("dom id=", e.event.path[2].id);
});
// 鼠标移入边线事件
this.network.on("hoverEdge", (e) => {
console.log("鼠标移入边线", e.edge);
});
// 鼠标移出节点事件
this.network.on("blurNode", (e) => {
console.log("鼠标移出节点", e.node);
});
// 鼠标移出边线事件
this.network.on("blurEdge", (e) => {
console.log("鼠标移出边线", e.edge);
});
6.鼠标拖动
// 鼠标拖动开始事件
this.network.on("dragStart", (e) => {
console.log("拖动开始", e);
});
// 鼠标拖动结束事件
this.network.on("dragEnd", (e) => {
console.log("拖动结束", e);
});
// 鼠标拖动中事件
this.network.on("dragStart", (e) => {
console.log("拖动中", e);
});
// 鼠标控制节点拖动中事件
this.network.on("controlNodeDragging", (e) => {
console.log("控制节点拖动中", e);
});
7.鼠标缩放事件
this.network.on("zoom", (e) => {
console.log("缩放", e);
});