d3 给元素添加click事件，为何点击2次才生效？

Question

.point-create 为点
.tipArrow-create为箭头
`showTipArrow=()=>{

d3.selectAll('.point-create').on('click',function(){//选择所有的点添加点击事件
  let $thisDom=d3.select(this);
  d3.selectAll('.tipArrow-create').filter(function(d,i,list){
    let arrowDom=d3.select(this);
    if(arrowDom.attr('regId')==$thisDom.attr('regId')){//匹配点是否跟箭头的regId一致
      arrowDom.attr('display','');
    
    }
  });
});
}`

点是动态添加的，showTipArrow函数位置放在动态添加点函数里面，

 d3.select('#points').append('use')
          .attr('id', 'red_'+thisId)
          .attr('regId',thisId)
          .attr('type', 'point')
          .attr('x', width-10)
          .attr('y', cyRed-10)
          .attr('yy',cyRed)
          .attr('class', 'point-create')
          .attr('xlink:href','#point')
          .call(d3.drag()
              .on('start', dragstarted)
              .on('drag', dragged)
              .on('end', dragended));
       this.showTipArrow();       

结果就是需要点击2次的时候添加的click函数才会生效，有人知道怎么回事吗？

Answer 1

我把添加的drag事件去掉以后就正常了？

Answer 2

我也碰到了这个问题，一直没找到相关的答案，直到自己发现了问题。

d3 版本：7.6.1

问题关键点：我在 dragstart 的时候 raise 了节点，就会导致这个节点无法触发 click，第二次点击的时候不会变化节点的顺序，所以可以触发 click 事件。

解决方案：把 raise 的操作改到 drag 中去做，不要在 start 的时候就可以了。

虽然不知道题主是什么情况，但是希望可以为后人提供帮助。