javascript – Firefox点击活动bug

2023年8月31日 169次阅读

我不确定如何为你们重新解决这个问题,但我会尽力向你解释.我有一个d3树布局结构.通过单击父级气泡应该扩展其子级,依此类推.在我的代码中,我目前有：

 // Enter any new nodes at the parent's previous position.
 var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
   .on("mousedown", function(d, event) { 
     if(event.ctrlKey){
       if (d.shortName != undefined) {
         modalOpen(d);
       }
       else{
         click(d);
       }
     }
     //event.which is handled in chrome
     //event.button is handled in IE10
     else if((event.which == 1)||(event.button == 1)||(event == 1)){
       click(d);
     }
  });

FireFox不识别event.ctrlKey但需要.有一个问题.主要问题是else if语句.我有用于chrome的event.which,用于IE的event.button和FireFox中的事件似乎不会给我一个整数. Mozilla Developer Network页面上描述的mouseevent.button属性说：

The button number that was pressed when the mouse event was fired: 
Left button=0, middle button=1 (if present), right button=2. 
For mice configured for left handed use in which the button actions are
reversed the values are instead read from right to left.

我总是尝试左键单击,但有时我得到0或2的值.如果我尝试右键单击我会得到1,0或2.它永远不会真正一致.如果我确实进入了最接近的节点,并且我定期点击,我得到的数字是19,9,3,2,0或1. 19和9似乎是最一致的,尽管在这种情况下.我不知道为什么Firefox必须如此困难,但我希望你们中的一个可以帮助我解决这个问题,所以每次都不会发生这种情况.

最佳答案 在d3中设置事件处理程序时,两个传递的参数不是基准和事件(如您所假设的),而是基准和索引,如下所示：

.on("mousedown", function(d, i) { 
    // 'd' is the datum
    // 'i' is the index
})

API文档(https://github.com/mbostock/d3/wiki/Selections#on)中对此进行了描述：

selection.on(type[, listener[, capture]])

Adds or removes an event listener to each element in the current
selection, for the specified type. The type is a string event type
name, such as “click”, “mouseover”, or “submit”. (Any DOM event type
supported by your browser may be used.) The listener is stored by
decorating the selected DOM elements using the naming convention
“__ontype”. The specified listener is invoked in the same manner as
other operator functions, being passed the current datum d and index
i, with the this context as the current DOM element. To access the
current event within a listener, use the global d3.event. The return
value of the event listener is ignored.

这可以解释为什么你得到随机整数 – 索引将根据你点击的元素而变化.为了获取鼠标事件,请使用全局d3.event,如下所示：

.on("mousedown", function(d, i) { 
    if(d3.event.ctrlKey){
        // your code here
    }
})

所以你的最终代码应如下所示：

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
    .on("mousedown", function(d, i) { 
        if(d3.event.ctrlKey){
            if (d.shortName != undefined) {
                modalOpen(d);
            } else {
                click(d);
            }
        }
        //event.which is handled in chrome
        //event.button is handled in IE10
        else if((d3.event.which == 1)||(d3.event.button == 1)||(d3.event == 1)){
            click(d);
        }
});
点赞