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

我很难让事件侦听器为网页中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

，然后没有其他内容

---

谢谢大家!

如果我正确理解了您的问题，那么代码的问题是每个事件处理程序之后的

（）

，然后传递到

addEventListener（）

。以

cercle

SVG元素和

showCercleTitle（）

处理程序为例：

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

---

如果我正确理解了您的问题，那么您的代码的问题是将每个事件处理程序传递到

addEventListener（）

后的

（

）。以

cercle

SVG元素和

showCercleTitle（）

处理程序为例：

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

它不是

cercle.addEventListener（onclick（showcercletTitle（））。它是
circle.addEventListener（“单击”，showCercleTitle）并且，假设
circle
是一个元素，它甚至有一个
click
事件。啊，好的！我修复了该部分，但它仍然不起作用……因为正如我所说的，
circle
（或者您正在使用的
addEventListener
的任何内容）必须有您正在收听的事件。如果不是，那就像是在等待猫吠叫。它不是
cercle.addEventListener（onclick（showcerclettitle（））。它是
circle.addEventListener（“单击”，showCercleTitle）并且，假设
circle
是一个元素，它甚至有一个
click
事件。啊，好的！我修复了该部分，但它仍然不起作用……因为正如我所说的，
circle
（或者您正在使用的
addEventListener
的任何内容）必须有您正在收听的事件。如果不是的话，那就像是在等猫叫。语法问题，但这不是真正的问题。OP正在尝试在没有
单击
事件的对象上注册
单击
事件。我在该链接上没有看到任何与支持的事件相关的内容。您已链接到方法。方法不是事件@斯科特马库斯，对不起，我应该说得更清楚些。我发送给您的链接内容如下：
SVGElement
“从其父元素继承方法”。因此，
SVGElement
提供了
addEventListener（）
，通过它可以在您误解的相应
SVGElement
实例上“处理”单击事件。没有人质疑它是否有
。addEventListner
。问题是它是否有一个
点击事件。有趣的是，它似乎在按预期的方式工作
（）
是一个语法问题，但这不是真正的问题。OP正在尝试在没有
单击
事件的对象上注册
单击
事件。我在该链接上没有看到任何与支持的事件相关的内容。您已链接到方法。方法不是事件@斯科特马库斯，对不起，我应该说得更清楚些。我发送给您的链接内容如下：
SVGElement
“从其父元素继承方法”。因此，
SVGElement
提供了
addEventListener（）
，通过它可以在您误解的相应
SVGElement
实例上“处理”单击事件。没有人质疑它是否有
。addEventListner
。问题是它是否有一个
点击
事件。很有趣-似乎对我来说工作正常