Right click events

Matt H

unread,

Jun 27, 2011, 1:36:59 AM6/27/11

to d3-js

Hi guys,
Does anyone have advice on how to capture a right click on an svg
element without triggering the browser's context menu?

I've tried:

[some_element].on("click", click);
function click(d, i) {
alert(d3.event.button);
}

a left-click gives me the result "0", but a right click either
triggers nothing (FF) or just shows the context menu (chrome)

Thanks,
Matt

Mike Bostock

unread,

Jun 27, 2011, 11:31:52 AM6/27/11

to d3...@googlegroups.com

You probably have to listen to mousedown and then preventDefault on
the event to disable the context menu. But generally speaking, I
wouldn't recommend doing such a thing, as it's inconvenient for users
and breaks standard behavior. Rather than using right click, have you
considered using double-click, shift-click or click-hold, or any
number of other interaction methods?

Mike

Jon Frost

unread,

Jun 27, 2011, 11:39:09 AM6/27/11

to d3...@googlegroups.com

I 2nd Mike's suggestions to prevent user frustration.

You can play with different options though and even have your own scripts run prior to or asynchronously with the display of the context menu.

This little script demos your options fairly well - http://www.javascripter.net/faq/leftvsrightmousebutton.htm

best,

Jon

Bob Myers

unread,

Dec 11, 2011, 2:11:45 AM12/11/11

to d3...@googlegroups.com

In any event, shouldn't drag behaviors check the button and not start dragging on right clicks?

In the meantime, any easy way to prevent right clicks from initiating drags?

Bob Myers

unread,

Dec 11, 2011, 6:08:59 AM12/11/11

to d3-js

I also note that a single click without moving the mouse kicks off a
drag, which seems wrong--or am I missing something?

Bob Myers

unread,

Dec 11, 2011, 6:16:32 AM12/11/11

to d3-js

I saw this sample code on the wiki:

function dragmove(d, i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", "translate(" + d.x + "," + d.y +
")");
}

Has anyone tried this? I did something similar and found that changing
the transform on the drag target like this will change the local mouse
coordinates in such a way that the reported dx and dy will be
sometimes double reality. My solution was to convert event.x and
event.y to global coordinates and keep track myself of how much the
mouse was moving. It seems to me that drag behavior should report dx
and dy in absolute terms. Unless I'm missing something here as well.

--
Bob

Tal

unread,

Dec 12, 2011, 10:38:58 AM12/12/11

to d3-js

Matt, I never tried it on svg, but I remember... back in the days of
HTML 4... there was this odd command that people started to like in
order to prevent copyright thefts:

If I recall correctly, I think that mostly IE accepted it.

I hope it's what you're looking for,
Tal

Chris Viau

unread,

Dec 13, 2011, 9:47:28 AM12/13/11

to d3...@googlegroups.com

If you still want to do this and absolutely want to use d3, you can do it like this:

d3.select("svg").node().oncontextmenu = function(){return false;};

As for dragging and right click, version 2.5.0 and 2.6.0 use different behaviors, as you can see here: