javascript - 阻止嵌入式 SVG 在 Chrome 上捕获鼠标事件

标签 javascript html google-chrome svg pointer-events

非常简单。我通过 <object> 在我的文档中嵌入了 SVG我正在申请pointer-events:none在根部的样式 <svg> 。它可以在 Firefox 中运行,但不能在 Chrome 中运行(我目前对任何其他浏览器不感兴趣)

MWE

有一个 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Why you no fix, Chrome?</title>
</head>
<body>
    <a id="click"><object data="svg.svg" type="image/svg+xml"></object></a>
    <script>document.getElementById('click').addEventListener('click',e => console.log(e));</script>
</body>
</html>

有一个 SVG 文件

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="pointer-events:none">
    <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-width="2" d="M 0 0 L 100 0 L 50 100 z" />
</svg>

如果没有办法让事件冒泡到 anchor (即:停止 svg 捕获),那么通过事件视界传递事件的方法也会很好

编辑

我忘了补充<object>元素必须保持可点击。我强调 MWE 在 Firefox 中有效,但在 Chrome 中无效

最佳答案

尝试

<object style="pointer-events:none" ... >

这应该可以解决问题;-)

关于javascript - 阻止嵌入式 SVG 在 Chrome 上捕获鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41856795/

相关文章:

javascript - 返回括号之间的文本且不包含括号

javascript - 如何为应用促销代码创建完整的函数

css - 最大宽度 div 中的右对齐图像

api - 如何从 Chrome 扩展程序中获取用户的位置?

java - session 未创建异常 : session not created: This version of ChromeDriver only supports Chrome version 77 using Selenium ChromeDriver

javascript - React Router v6 useRouteMatch 等效项

javascript - 有没有办法根据单个值在 html 元素的多个数据属性中搜索数组?

html - 在IE、Chrome、Firefox中定位不同

jquery - CSS3 不适用于 Bootstrap

google-chrome - headless (headless) Chrome 没有重定向