vis.js 如何在点击事件中使用修饰符？

Question

是否可以在 vis.js 网络中进行 ALT+单击、CTRL+SHIFT+单击等事件？如何定义和使用使用此类事件的函数？

Answer 1

在网络模块中使用 vis.js 的 click 事件无法使用键盘修饰符（参见 http://visjs.org/docs/network/#Events）。

Answer 2

是的，这是可能的，但没有记录。您要做的是获取原始 JavaScript 事件。一旦你掌握了它，你就可以部署常用的技巧了。

对于点击事件，如 network.on('click', function(e) {...}); 声明的那样，您通过 let oEvent = e.event.srcEvent;

到达原始事件

然后您可以在回调中测试 oEvent.shiftKey 等。

这也适用于 doubleClick。 请注意，对于悬停事件，您可以使用 let oEvent = e.event;（无 srcEvent）访问原始 JS 事件。

如有疑问，只需在浏览器中打开 JS 控制台并探索 e 数据结构。

顺便说一下，我还想推荐 this post 关于如何从 vis.js 中的 doubleClick 解密 click，作为 [=18] =] 也会触发 click!我已将其包含在以下代码段中。

总结：

/* DECLARING EVENTS */
network.on('doubleClick', function(e) {onDoubleClick(e)});
network.on('click', function(e) {onClick(e)});
network.on('hoverNode', function (e) {doOnHoverNode(e)});
network.on('blurNode', function (e) {doOnBlurNode(e)});

/* MANAGING DOUBLE VS SINGLE CLICK */
let doubleClickTime = 0;
const threshold = 200;

function onClick(e) {
  const t0 = new Date();
  if (t0 - doubleClickTime > threshold) {
    setTimeout(function () {
      if (t0 - doubleClickTime > threshold) {
        doOnClick(e);
      }
    },threshold);
  }
}

function onDoubleClick(e) {
  doubleClickTime = new Date();
  doOnDoubleClick(e)
}

/* DEFINE CALLBACKS HERE */
function doOnClick(e) {
  // fetch id of node clicked upon
  let nodeId = e.nodes[0];
  // fetch original JS event
  let jsEvent = e.event.srcEvent;
  // match modifiers
  let  shift = jsEvent.shiftKey;
  let  alt = jsEvent.altKey;
  let  meta = jsEvent.metaKey;
  // do callback
  if (meta) {
    if (shift)
      // do stuff
    else
      // do stuff
  }
}

function doOnDoubleClick(e) {
  // don't delete the following line!
  doubleClickTime = new Date();
  // the rest just like click

function doOnHoverNode(e) {
  // fetch id of node clicked upon
  let nodeId = e.nodes[0];
  // fetch original JS event
  let jsEvent = e.event;
  // the rest just like click
}

function doOnBlurNode(e) {
  // ditto doOnHoverNode
}

希望这对您有所帮助。

vis.js 如何在点击事件中使用修饰符？

How to use modifiers with click event in vis.js?

events

modifiers

vis.js

vis.js-network