Visjs 时间线编辑内容项模板

Question

我希望能够在时间线本身中编辑 visjs 时间线项目的内容属性。但是，当我将输入用作模板的一部分时，它似乎没有接收到任何鼠标事件；我无法单击它并键入任何内容，单击按钮也不起作用。不过，按钮似乎会获得鼠标悬停事件：

function test(item) {
  alert('clicked');
}

var options = {  
  minHeight: '100%',
  editable: true,
  moveable: false,
  selectable: false,
  orientation: 'top',
  min: new Date('2015-01-01'),
  max: new Date('2015-12-31'),
  zoomMin: 1000 * 4 * 60 * 24 * 7,
  margin: {
      item: 10,
      axis: 5
    },
  template: function(item) {
    return '<div onClick="test"><input value="click in the middle"></input><button onClick="test">test</button></div>'
  }
};


/* create timeline */

 timeline.on('click', function (properties) {
   var target = properties.event.target;
   if(properties.item) properties.event.target.focus();
 });

https://codepen.io/barticula/pen/EpWJKd

编辑： CodePen 示例上面的代码已更新为使用单击事件来关注输入，但缺少所有其他正常的鼠标行为。键盘事件似乎正常运行。

Answer 1

要通过单击时间线元素获得反应，您可以使用图书馆自己的事件（请参阅文档上的 events 和网站上的 exemple）。

在您的示例中，您可以在纯 javascript 中的其他可能解决方案中执行类似的操作，包括...

// Configuration for the Timeline
var options = {  
  minHeight: '100%',
  editable: true,
  moveable: false,
  selectable: false,
  orientation: 'top',
  min: new Date('2015-01-01'),
  max: new Date('2015-12-31'),
  zoomMin: 1000 * 4 * 60 * 24 * 7,
  margin: {
      item: 10,
      axis: 5
    },
  template: function(item) {
    return '<div id="test-div"><input placeholder="hey" type="text" id="inputTest" ><button id="test-button">test</button></div>'
  }
};

// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

timeline.on('click', function (properties) {
  var target = properties.event.target;
  if(properties.item) alert('click on' + target.id);
});

更新

很难确切地知道您想要做什么，因为无论如何都有几种可能的解决方案。
最终，我在下面提出另一个 sn-p 并更新了 codepen.... 但它会满足您的需要，不确定吗？

第二次更新（关于另一个工作轨道，见 cmets）

// Configuration for the Timeline
var options = {
    minHeight: '100%',
    editable: true,
    moveable: false,
    selectable: false,
    orientation: 'top',
    margin: {
        item: 10,
        axis: 5
    },
    template: function(item) {
        return '<div><input placeholder="edit me..." type="text"></input><button>send value</button></div>'
    }
};

// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

timeline.on('click', function(properties) {
    var target = properties.event.target;
    var item = items.get(properties.item);
    console.log(properties.event);
    // if (properties.item && target.tagName === "DIV") focusMethod(target);
    if (properties.item && target.tagName === "INPUT") target.focus();
    if (properties.item && target.tagName === "BUTTON") getInputValue(item, target);
});

focusMethod = function getFocus(target) {
    // target.insertAfter("BUTTON");
    target.firstChild.focus();
}

getInputValue = function getValue(item, target) {
    target.focus();
    var inputValue = (target.parentNode.firstChild.value) ? target.parentNode.firstChild.value : "no value entered ";
    alert("Input value : " + inputValue + " => send by: " + item.content)
}