как поместить элемент SVG (созданный с помощью Rapheal JS lib) в элемент DIV (чтобы сделать управление кликами в RMB) - PullRequest
Новая
       9

как поместить элемент SVG (созданный с помощью Rapheal JS lib) в элемент DIV (чтобы сделать управление кликами в RMB)

2 голосов
/ 16 июня 2011

Моя главная цель - иметь обнаружение щелчка правой кнопкой мыши для каждого элемента SVG (созданного с помощью Raphael JS lib), мой HTML-код для этого выглядит очень просто: 

<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>

и мой JS содержит 

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

Я также перепробовал многие (доступные в Интернете в качестве примеров) JS-скрипты, которые отображают какое-то меню по щелчку RMB, и похоже, что можно было бы ограничить это меню RMB только некоторым выбранным HTML-классом DIV (пожалуйста, предупредите меня, если нет !), поэтому моя проблема сейчас заключается в следующем: как поместить те элементы массива «fill» в отдельный DIV, который будет использовать один и тот же класс?

Если есть какой-то другой более простой способ сделать это - я открыт :) Заранее большое спасибо, Borys

Я хотел бы знать, возможно ли поместить каждый элемент SVG в отдельный DIV, просто? Я хотел бы

1 Ответ

2 голосов
/ 16 июня 2011

Я не понимаю, почему вам нужно обернуть svg в div, просто чтобы проверить, какая кнопка мыши была нажата.

Вместо этого попробуйте что-то вроде этого: 

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

Вот ссылка для объекта события click из DOM 3 Events.И прочитайте Event.preventDefault , если вы не знаете, что это такое.

...