Question

我无法让事件侦听器为我网页上SVG元素上的click事件工作。

现在，每当页面加载时，它就会显示第一个对话框（标题为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一次并没有其他内容。

谢谢！

Answer 1

如果我正确理解了您的问题，则代码的问题是每个事件处理程序之后的()，然后传递给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>

\.+

JavaScript：单击SVG元素时如何显示警报对话框？

1 个答案: