Question

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

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示例上方的代码已更新为使用click事件将焦点放在输入上，但是所有其他常规鼠标行为均缺失。键盘事件似乎正常运行。

Answer 1

要通过单击时间轴元素来做出反应，可以使用库自身的事件（请参见doc上的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);
});

已更新

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

第二次更新（有关其他工作轨道，请参见评论）

// 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)
}

Visjs时间轴编辑内容项模板

1 个答案: