gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 10:05:04 33 4
gpt4 key购买 nike

我有一个 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/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com