{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《Right mouse click detection on SVG shape in JavaSc》','https://www.manongdao.com/q-761867.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I need some help with my script in which I would like to detect RMB click.
INFO: finally I want to display my own right-click menu on a dedicated SVG shape, which is displayed with a use of Raphael js lib, I found out that there are many different examples on web, even very simple ones to implement, like with jQuery - but I have to be able to detect wether RMB was clicked or any other.
I have tried (without success on RMB) a following peace of code:
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 300);
var shape = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
var fill=shape.attr({fill:'#FFFFFF'});
fill.click(function (evt){
if(evt.button == 2) {
// right mouse button pressed
evt.preventDefault();
}
alert("Pressed mouse = " + evt.button.toString());
});
}
</script>
</head>
<!-- <BODY oncontextmenu="return false"> -->
<body>
<div id="canvas_container"></div>
</body>
</html>
in IE only LMB(0) is detected, in Chrome left(0) and middle(1) and default context menu is displayed, when I disable it inside body tag (as commented-out) context menu is not displayed at all, but I still cannot get the alert with RMB(2),
thank you for all the hints/support, Borys
Looks like SVG elements do not fire the "click" event instead they fire "contextmenu" on right click. I am using d3.js to bind the events, so this worked for me:
Posting the link to a good solution for d3 contextmenu here.
Github link : https://github.com/patorjk/d3-context-menu
Plunker : http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview
``The following jQuery context menu plugin works with D3 and SVG: https://github.com/arnklint/jquery-contextMenu