如何在vis.js中使用带有click事件的修饰符?

时间:2017-05-10 07:31:38

标签: events vis.js modifiers vis.js-network

是否可以在vis.js网络中进行ALT +点击,CTL + SHIFT +点击等事件?如何定义和使用这些事件的函数?

2 个答案:

答案 0 :(得分:1)

是的,尽管没有记录,但有可能。您要做的就是获取原始的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中的click解密doubleClick,因为doubleClick也会触发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
}

希望这会有所帮助。

答案 1 :(得分:0)

使用网络模块中的vis.js对click事件使用键盘修饰符是不可能的(请参阅http://visjs.org/docs/network/#Events)。