how to put an SVG element (created with Rapheal JS lib) into a DIV element (to make RMB click managment)_问答_开发者

how to put an SVG element (created with Rapheal JS lib) into a DIV element (to make RMB click managment)

开发者 https://www.devze.com 2023-03-13 13:26 出处：网络

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.