javascript - 点击处理程序 element

Question

似乎使用<svg:svg> </svg:svg>元素不会在 Safari 或 Chrome 中呈现任何内容，但使用<svg> </svg>效果很好。但是，添加onclick仅适用于<svg:svg>元素。这样做的正确方法是什么？

这个 jsfiddle演示了这个问题（将 Safari/Chrome 与 Firefox 进行比较）。

Answer 1

您甚至不必在 SVG 周围放置一个容器。

您只需要为position: relativeSVG 本身定义一个，它就可以解决点击触发问题。

这是一个分叉的小提琴显示它：http: //jsfiddle.net/jpsirois/xnw1tbL7/

Answer 2

好的，事实证明，创建 SVG 的第一种方法onclick只在绘制的部分上创建。这意味着您实际上可以做一些不错的事情（在您的情况下可能没有用）。

在这个小提琴中，我创建了两个单独onclick的 s，一个在您专门单击绘图时触发（我将其放大以便您可以看到），另一个在您单击 SVG 框时触发，方法是在其周围放置一个容器。

HTML：

<div id="svgContainer">
    <svg id="firstSVG" class="s" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="25" fill="red"/>
    </svg>
</div>

JS：

document.getElementById('firstSVG').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Click works here too !";  

}, false);
document.getElementById('svgContainer').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Well, a container seems better.";  

}, true);

所以基本上只是在SVG周围使用一个容器，或者只是使用点击绘图