selection.on（type [，listener [，capture]]）

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中的事件似乎不会给我一个整数。 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必须如此困难，但我希望你们中的一个可以帮助我解决这个问题，所以每次都不会发生这种情况。

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

为当前的每个元素添加或删除事件侦听器   选择，用于指定的类型。类型是字符串事件类型   名称，例如＆＃34;点击＆＃34;，＆＃34;鼠标悬停＆＃34;或＆＃34;提交＆＃34;。（任何DOM事件类型   可以使用您的浏览器支持。）监听器存储   使用命名约定装饰选定的DOM元素   ＆＃34; __ ontype＆＃34 ;.以与调用相同的方式调用指定的侦听器   其他运算符函数，传递当前数据d和索引   我，将此上下文作为当前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);
        }
});

Firefox点击事件错误

1 个答案:

selection.on（type [，listener [，capture]]）