如何引发vis.js时间轴的click事件(将clickToUse选项设置为True以获得单击结果)? [英] How to raise a click event for a vis.js Timeline (to get the result of a click when the clickToUse option is set to True)?

问题描述

在一个使用 vis.js (由PHP代码生成)的项目中，我有多个时间轴.

I have multiple timelines in a project that uses vis.js, generated by a PHP code.

时间轴有一个选项，称为 clickToUse ，如果将其设置为 True ，当用户单击时间轴时，它将导致选择特定的时间轴，导致阴影轮廓出现在其周围.

There is an option for timelines, called clickToUse, if which is set to True, it causes the specific timeline to get selected when the user clicks on the timeline, causing a shadowed outline appearing around it.

我正在使用一个附加的div标头，该标头包含标题和有关其下方时间轴的各种信息.

I'm using an additional div header with title and various information regarding to the timeline below it.

当我单击标题div时，我希望从代码中选择时间线(因为阴影轮廓线很深)，所以当用户单击时间线时会发生这种情况.

I would like to have the timeline selected from code (causing to have the shadowed outline) when I click on the header div, so something that happens when the user clicks on the timeline.

这怎么办?任何帮助将不胜感激.

How can this be done? Any help would be appreciated.

推荐答案

最后，我已经弄清楚了，这是我的解决方案.首先，我必须使用 stopPropagation ，因为基本上vis.js会在用户单击时间线以外的其他位置时取消激活时间线.因此，点击标题div将在我们激活时间轴后立即停用它.

Finally I've figured it out, this is my solution. First of all, I had to use stopPropagation, because basically vis.js deactivates a timeline when the user clicks anywhere else but on the timeline. So clicking on the header div would deactivate the timeline right after we activate it.

在vis.js代码中，我发现当clickToUse设置为true时，它使用 Activator 对象来处理激活/停用.如果将其设置为false，则不会在时间轴对象中传播激活器. Activator对象具有可调用的"activate"和"deactivate"功能(以及其他一些功能)(未在vis.js文档中编写).

Looking in the vis.js code, I found that it uses an Activator object to handle activation/deactivation when clickToUse is set to true. If it is set to false, the Activator is not propagated in the Timeline object. The Activator object has an "activate" and "deactivate" function (and some others) that can be called (it's not written in the vis.js documentation).

因此，我正在使用以下代码，它可以正常工作:

So, I'm using the following code and it works:

document.getElementById('headerdiv').addEventListener('click', function() {
  event.stopPropagation();
  timeline.activator.activate();
});

如果调用.activate()，它还会停用其他时间轴(如果有多个时间轴)，因此无需调用任何其他函数，因为所有内容都写在activate()函数中:css更改，发射器，键绑定.

If you call .activate(), it also deactivates the other timelines (if you have multiple), so no need to call any other functions, because everything is written in the activate() function: the css change, the emitters, the key binding.

这篇关于如何引发vis.js时间轴的click事件(将clickToUse选项设置为True以获得单击结果)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！