JavaScript: Как сделать диалоговое окно с предупреждением при нажатии на элемент SVG? - PullRequest
Новая
       18

JavaScript: Как сделать диалоговое окно с предупреждением при нажатии на элемент SVG?

1 голос
/ 26 марта 2019

У меня проблемы с настройкой прослушивателя событий для событий щелчка по элементам SVG на моей веб-странице.

Прямо сейчас, это показывает первый диалог всякий раз, когда страница загружается (заголовок cercle). То, что я хочу сделать, это отображать предупреждающее сообщение, только когда щелкает тот конкретный элемент (или раздел) SVG изображения SVG. Я также показываю, какое предупреждение вывести на экран, если снова щелкнуть элемент SVG.

Пожалуйста, помогите, потому что я действительно озадачен этим.

Код, который я сейчас использую: 

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

cercle.addEventListener("click" , showCercleTitle());
path.addEventListener("click" , showPathTitle());
rectangle.addEventListener("click" , showRectTitle());

id и ссылки верны, так как он отображает правильные заголовки, но только один раз и для cercle, а затем ничего больше.

Спасибо!

1 Ответ

0 голосов
/ 26 марта 2019

Если я правильно понимаю ваш вопрос, проблема с вашим кодом - () после каждого из ваших обработчиков событий, при переходе затем к addEventListener().Возьмем, к примеру, элемент cercle SVG и обработчик showCercleTitle(): 

cercle.addEventListener("click" , showCercleTitle()); //<-- () causing the issue

Передав showCercleTitle() с (), вы немедленно вызываете функцию showCercleTitle при передаче ее на addEventListener() как обработчик события click.Это означает, что результатом этого вызова showCercleTitle() (который, вероятно, undefined?) Будет то, что будет использоваться в качестве обработчика для события click в элементе SVG.Чтобы решить эту проблему, рассмотрите возможность удаления () во всех назначениях обработчиков событий, как показано ниже: 

const cercle = document.getElementById('leCercle');
const rectangle = document.getElementById("leRect");
const path = document.getElementById("laCourbe");

/* Define callback functions for each alert/dialog */
function showCercleTitle() {
  alert('showCercleTitle')
}

function showPathTitle() {
  alert('showPathTitle')
}

function showRectTitle() {
  alert('showRectTitle')
}

/* Add each defined callback as click event listener to
respective svg elements. Avoid adding the () after each
handler when passing to addEventListener() */
cercle.addEventListener("click", showCercleTitle);
path.addEventListener("click", showPathTitle);
rectangle.addEventListener("click", showRectTitle);
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect id="laCourbe" x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect id="leRect" x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <circle id="leCercle" cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>  
</svg>
...