同时使用“ d3.event.preventDefault”和“ d3.event.which”

Question

该代码可以完美运行-Internet Explorer 11中除外。该deleteNode(d)如果仅调用mousedown句柄注释掉。

circle.enter().append('circle')
  .on('contextmenu', function (d) {
    deleteNode(d);
  })
  .on('mousedown', function (d) {
    setNode(d);
  });

这就是为什么我尝试使用捕捉右键单击的原因mousedown，但是上下文菜单仍然出现。

circle.enter().append('circle')
  .on('mousedown', function (d) {
    d3.event.preventDefault();
    if (d3.event.which == 3) {
      deleteNode(d);
    }
    setNode(d);
  });

如何解决不显示上下文菜单或同时捕获contextmenu和mousedown事件的问题？

Answer 1

您将自己解决问题。所需的一切已经存在，您只需要重新排列一下即可：

circle.enter().append("circle")
    .on("contextmenu", function(d) {
        d3.event.preventDefault();
    })
    .on("mousedown", function (d) {
        if (d3.event.which == 3) {
            deleteNode(d);  // <-- d probably needs to be replaced
        } else {
            setNode(d);    // <-- d probably needs to be replaced
        }
    });

这对于IE11以及FF和Chrome都适用。

顺便说一句，请注意，它d是指绑定到节点的基准，而不是节点本身。在事件侦听器内this将引用当前节点。

circle.enter().append("circle")
    .on("contextmenu", function(d) {
        d3.event.preventDefault();
    })
    .on("mousedown", function (d) {
        if (d3.event.which == 3) {
            deleteNode(d);  // <-- d probably needs to be replaced
        } else {
            setNode(d);    // <-- d probably needs to be replaced
        }
    });

var svg = d3.select("svg");                
svg.append("circle")
    .attr({
        "cx": 100,
        "cy": 100,
        "r": 100
    })
    .on("contextmenu", function(e) {
        d3.event.preventDefault();
    })
    .on("mousedown", function (e) {
        if (d3.event.which == 3) {
          //console.log("deleteNode(d)");
        } else {
          //console.log("setNode(d)");
        }
    });