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

Posted

技术标签:

【中文标题】如何在 vis.js 中使用带有点击事件的修饰符?【英文标题】:How to use modifiers with click event in vis.js? 【发布时间】:2017-05-10 07:31:38 【问题描述】:

vis.js 网络中是否可以有 ALT+click、CTL+SHIFT+click 等事件?如何定义和使用使用此类事件的函数?

【问题讨论】:

【参考方案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 中从doubleClick 中破译click,因为doubleClick 也会触发click!我已将其包含在以下 sn-p 中。

总结:

/* 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

希望这会有所帮助。

【讨论】:

【参考方案2】:

在网络模块中使用 vis.js 无法将键盘修饰符与 click 事件一起使用(请参阅 http://visjs.org/docs/network/#Events)。

【讨论】:

以上是关于如何在 vis.js 中使用带有点击事件的修饰符?的主要内容,如果未能解决你的问题,请参考以下文章

v-on事件修饰符

咋使用VUE中的事件修饰符

调度点击事件并保留击键修饰符

容易搞混---修饰符

vue的修饰符

Vue小基础鼠标点击和阻止冒泡