添加拖动并单击事件冲突到d3中的元素？

Question

拖动并单击事件将添加到d3的元素中。第一次单击需要我单击两次以触发click事件。当我删除添加的拖动事件时，单击一次以触发单击事件。

d3.select('#points').append('use')
      .attr('id', 'red_'+thisId)
      .attr('class', 'point-create')
      .attr('xlink:href','#point')
      .on('click',showTipArrow)
      .call(d3.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended));

function showTipArrow(){
console.log('6666');}

Answer 1

问题是，当您第一次单击，打开（mousedown）拖动事件时，但只有在您（mouseup）之后，才会加载click事件。但是当拖动事件已经开始时，点击会被抑制。

使用d3.event.defaultPrevented来控制事件：

function showTipArrow(){
if (d3.event.defaultPrevented) return;
console.log('6666');}

请参阅此Example