gpt4 book ai didi

javascript - 使用 中的 SVG 是否允许点击事件传播到父处理程序?
转载 作者:行者123 更新时间:2023-12-02 02:39:01 24 4
gpt4 key购买 nike

从 HTML 添加 SVG <object>似乎创建了一个无响应的空间,其中点击事件不会通过 SVG 和对象元素传播。

在示例中,这是通过单击按钮的中心来演示的。单击操作似乎没有将事件传播到父元素,即按钮。但是,当单击按钮的边缘(远离 SVG)时,将调用单击事件。

var buttonEl = document.getElementById('button');
buttonEl.addEventListener('click', function() {
console.log('Clicked!')
})
<button id="button" style="padding:5rem;">
<object data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" type="image/svg+xml" style="height:40px;width:40px;">
Check
</object>
</button>

最佳答案

在对象元素上使用 pointer-events:none;

var buttonEl = document.getElementById('button');
buttonEl.addEventListener('click', function() {
console.log('Clicked!')
})
<button id="button" style="padding:5rem;">
<object style="pointer-events:none;height:40px;width:40px;" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" type="image/svg+xml">
Check
</object>
</button>

关于javascript - 使用 <object> 中的 SVG 是否允许点击事件传播到父处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63910825/

24 4 0