This code works perfect — except in Internet Explorer 11. The deleteNode(d) only calls if the mousedown handle is mented out.

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

That's why I try to catch right click with mousedown, but the context menu still appears.

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

How to fix not showing up the context menu or catching both contextmenu and mousedown events?

This code works perfect — except in Internet Explorer 11. The deleteNode(d) only calls if the mousedown handle is mented out.

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

That's why I try to catch right click with mousedown, but the context menu still appears.

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

How to fix not showing up the context menu or catching both contextmenu and mousedown events?

• javascript
• d3.js

• 1 check the answer to this question, might be your cause...stackoverflow./questions/14839440/jquery-mousedown-vs-click – hubson bropa Commented May 11, 2015 at 15:02
• Thank you for your input! I don't have another "click" handler (just, touchend, mouseover, mouseend, dbltap) and it doesn't work with click. – Agata Commented May 11, 2015 at 15:07

1 Answer 1

You are close to your own solution to the problem. All that is needed is already there, you just need to rearrange it a bit:

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

This works for me in IE11 as well as in FF and Chrome.

As an aside, please note that d refers to the datum bound to the node, not to the node itself. Within the event listener this will refer to the current node.

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

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg width="400" height="400">
</svg>