“ onclick”不适用于带有svg图像的对象元素

当我在html文档onclick中使用object-element的属性时,它不会响应单击。


在我的文档中,我有一个svg图像,并将其存储在object-element中,因为图像中有些动画仅通过使用img-tag就会丢失。


在下面的简化示例中,onmouseover在这两个对象的作品,但onclick对刚工作object没有SVG图像。


document.getElementById('test1').onmouseover = hover;

document.getElementById('test1').onclick = click;

document.getElementById('test2').onmouseover = hover;

document.getElementById('test2').onclick = click;


function hover() { alert('Hovered');};

function click() { alert('Clicked');};

<object id='test1' data="https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg" height="50px"></object>


<object id='test2' height="50px" border="1px solid black">some object</object>

我在这里做错什么了吗?还是有可行的替代方法?

为此(和相关问题)给出的答案建议pointer-events: none在svg-image上使用并将其包装在div中,并将侦听器应用于该div。但是我需要svg-image来响应mouse events,因此无法设置pointier-events: none


梵蒂冈之花
浏览 169回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript