Firefox 点击事件错误

Question

我不确定如何为你们重现这个问题，但我会尽力向你们解释。我有一个 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 中的 event 似乎只给我一个整数。 Mozilla 开发者网络页面上描述的 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 必须如此困难，但我希望你们中的一个可以帮助我解决这个问题，这样就不会每次都发生这种情况。

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]])

为当前的每个元素添加或删除一个事件监听器 选择，用于指定的类型。类型为字符串事件类型 名称，例如“单击”、“鼠标悬停”或“提交”。 （任何 DOM 事件类型 可以使用您的浏览器支持的。）监听器存储在 使用命名约定装饰选定的 DOM 元素 “__ontype”。指定的侦听器以与以下相同的方式调用 其他运算符函数，传递当前数据 d 和索引 i，将 this 上下文作为当前的 DOM 元素。访问 侦听器中的当前事件，使用全局 d3.event。 返回 事件监听器的值被忽略。

这可以解释为什么您会得到随机整数 - 索引会根据您点击的元素而有所不同。为了获得鼠标事件，请使用全局 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);
        }
});