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