双击时间线时如何删除添加项目事件？答案

【问题标题】：How can I delete the add item event when I double-click on timeline?双击时间线时如何删除添加项目事件？
【发布时间】：2019-01-09 12:41:06
【问题描述】：

我在使用来自 vis.js 的 Timeline 应用程序时遇到问题。

当我双击我的时间线时，我需要删除添加项目事件。我已经用这段代码试过了，但我没有成功。有人可以帮我吗？

我已使用我使用的代码编辑了问题。

    <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
          </head>
          <body>
          <div id="visualization"></div>


            <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
              <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>

                <script type="text/javascript">
                  // DOM element where the Timeline will be attached
                var container = document.getElementById('visualization');

                // Create a DataSet (allows two way data-binding)
                var items = new vis.DataSet([
                  {id: 1, content: 'item 1', start: '2014-04-20'},
                  {id: 2, content: 'item 2', start: '2014-04-14'},
                  {id: 3, content: 'item 3', start: '2014-04-18'},
                  {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
                  {id: 5, content: 'item 5', start: '2014-04-25'},
                  {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
                  ]);

                // Configuration for the Timeline
                var options = {
                  clickToUse: true,
                  editable:true,
                  doubleClickMode:false
                };

                // Create a Timeline
                var timeline = new vis.Timeline(container, items, options);
                timeline.on('click', function (properties) {
                  console.log("Click event fired");
                });

                timeline.on('doubleClick', function (properties) {
                  console.log("Double click event fired");
                });

                </script>

                  </body>
                  </html>

【问题讨论】：

标签： javascript vis.js

【解决方案1】：

我已经用这段代码完成了：

<html>
  <head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      </head>
      <body>
      <div id="visualization"></div>


        <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>

            <script type="text/javascript">
              // DOM element where the Timeline will be attached
            var container = document.getElementById('visualization');

            // Create a DataSet (allows two way data-binding)
            var items = new vis.DataSet([
              {id: 1, content: 'item 1', start: '2014-04-20'},
              {id: 2, content: 'item 2', start: '2014-04-14'},
              {id: 3, content: 'item 3', start: '2014-04-18'},
              {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
              {id: 5, content: 'item 5', start: '2014-04-25'},
              {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
              ]);

            // Configuration for the Timeline
            var options = {
              clickToUse: true,
              editable:{
               add: false,
               remove: true
               }

            };

            // Create a Timeline
            var timeline = new vis.Timeline(container, items, options);
            timeline.on('click', function (properties) {
              console.log("Click event fired");
            });

            timeline.on('doubleClick', function (properties) {
              console.log("Double click event fired");
            });

            </script>

              </body>
              </html>

【讨论】：