javascript - 为什么我的 SVG 组上没有触发 click 事件?

标签 javascript jquery svg onclick

我有一个 svg 文件 (世界地图)与 路径 s 塑造了每一个国家,这些国家本身被归类为 代表大陆的元素 - 结构如下:

<svg id="worldmap" viewBox="100 0 8334 4171">
  <g id="Asia" class="wm-cont">
    <path id="AF" d="M5707.92,1390.83l-22.5, etc...
    ...

单击后我想放大一个大陆,所以我为亚洲编写了以下 jQuery:
$(document).ready(function() {
    $("#Asia").click(function() {

        // hide all continents
        $(".wm-cont").css("display", "none");

        // show Asia
        $("g.wm-cont#Asia").fadeIn();

        // shift the continent into view
        $("g.wm-cont#Asia").setAttribute("transform", "translate(-400,439) scale(0.032,-0.032");
    });
});

...但我点击并没有任何 react 。为什么不?我尝试将我的选择器更改为 g#Asia 和类似的选择器,但没有任何改变。

对此的任何帮助将不胜感激。

更新

出于某种原因,现在这有效:
$(document).on('click', '#Asia', function() {
    alert("Asia");
});

...虽然我没有改变 svg 的结构。热烈欢迎任何关于为什么这样做的想法:-)

最佳答案

一个 g element 只是一个空容器;它不能自己触发事件。
rect在您的 g并尝试

 <rect x="0" y="0" width="100" fill= "white" height="100"></rect>

示例演示

document.querySelector("#Asia").addEventListener("click", () => alert("clicked"))
<svg width="300" height="300">
  <g id="Asia">
    <rect x="0" y="0" width="100" fill= "gray" height="100"></rect>
  </g>
</svg>

关于javascript - 为什么我的 SVG 组上没有触发 click 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61624897/

相关文章:

javascript - Opera Mobile 无法使用 Javascript 聚焦文本输入

javascript - 将 .click() 应用于 li 元素时应使用什么选择器?

javascript - Jquery 延迟来自每个循环的 ajax 请求

javascript - 如何获取选定一周的所有天数?

jquery - 如何用jquery一一显示和隐藏每个div

javascript - 表单 POST 提交请求显示为 get 请求

javascript - 添加文本标签以强制 d3.js 中的定向图链接

IE9 上基于 JavaScript 的 SVG 渐变操作

不同域上的 Firefox SVG 过滤器

javascript - 响应地将 div 的上边缘定位在另一个 div 中的圆的中心点?