javascript - Firefox 点击事件错误

Question

我不太确定如何为你们重现这个问题，但我会尽力向你们解释。我有一个 d3 树布局结构。通过点击父气泡应该展开它的 child 等等。在我的代码中，我目前有:

 // 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 页面上描述的 mousevent.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 必须如此困难，但我希望你们中的一个能帮助我解决这个问题，所以它不会每次都发生。

Answer 1

在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);
        }
});