how to put an SVG element (created with Rapheal JS lib) into a DIV element (to make RMB click managment)
My prime goal is to have a Right Mouse Button click detection for each SVG element (created with Raphael JS lib), my html code for this looks very straightforward:
<head>
...
<script type="text/javascript" src="/side_media/js/raphael.js"></script>
<script type="text/javascript" src="/side_media/js/MyScript.js"></script>
</head>
<body>
...
<div id="canvas_container">
</body>
and my JS contains
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 900, 400);
...
surface[1] = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
surface[2] = paper.path('m150,150l-10,-20c20,-17 40,-17 60,0l-10,20l-40,0z');
surface[3] = paper.path('m190,170l10,20c16,-20 16,-40 0,-60l-10,20l0,20z');
surface[4] = paper.path('m190,170l10,20c-20,17 -40,17 -60,0l10,-20l40,0z');
surface[5] = paper.path('m150,150l-10,-20c-16,20 -16,40 0,60l10,-20l0,-20z');
for(i=1;i<=5;i++)
fill[i]=surface[i].attr({fill:'#FFFFFF'});
//each element has its own url activated on click (LMB)
toothfill[1].click(function (){window.location="http:...";});
...
}
I have also tried many (available on web as examples) JS scripts which show some menu on RMB click and it looks开发者_如何学运维 that it would be possible to restrict this RMB menu only to some selected html DIV class (please warn me if not!), so my problem right now is: howto put those "fill" array elements into seperate DIV which would share the same class?
If there is any other easier way to do it - I am open :) thanks a lot in advance, Borys
I would like to know is it possible to put each SVG element into a separate DIV, just ? I would like
I don't understand why you'd need to wrap the svg in a div just to check which mouse button was pressed.
Try something like this instead:
toothfill[1].click(function (evt){
if (evt.button == 0) {
// left mouse button pressed
}
else (evt.button == 1) {
// right mouse button pressed
evt.preventDefault(); // prevent right-click menu from appearing
}
});
Here's the reference for the click Event object from DOM 3 Events. And read up on Event.preventDefault if you don't know what it is.
加载中,请稍侯......
精彩评论