Как использовать модификаторы с событием click в vis.js?

Question

Можно ли в сети vis.js иметь события ALT+ щелчок, CTL+SHIFT+ щелчок и т. Д.? Как функции, использующие такие события, могут быть определены и использованы?

Answer 1

Нельзя использовать клавиатурные модификаторы с click события с использованием vis.js в сетевом модуле (см. http://visjs.org/docs/network/).

Answer 2

Да, это возможно, хотя и не документировано. Что вам нужно сделать, это получить исходное событие JavaScript. Когда у вас есть это, вы можете использовать обычные приемы.

Для события щелчка, как объявлено, скажем, network.on('click', function(e) {...}); Вы достигаете оригинального события с let oEvent = e.event.srcEvent;

Тогда вы можете проверить oEvent.shiftKey и т. д. в рамках обратного вызова.

Это работает также для DoubleClick. Обратите внимание, что для событий наведения вы получаете доступ к исходному событию JS с помощью let oEvent = e.event; (нет srcEvent).

В случае сомнений просто откройте консоль JS в своем браузере и изучите e структура данных.

Кстати, я также хотел бы рекомендовать этот пост о том, как расшифровать click из doubleClick в vis.js, как 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
}

Надеюсь это поможет.