如何在 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 中使用带有点击事件的修饰符?的主要内容,如果未能解决你的问题,请参考以下文章