我正在使用 jQuery 动态添加元素以使用以下代码显示 SVG:
someEl = ('#someElement');
cancelButton = $(document.createElement('object')).attr({
'class': 'cancelButton',
'id':parent_id+'_xbtn',
'data': 'img/cancelBtn.svg',
'type': 'image/svg+xml'
});
someEl.after(cancelButton);
function cancel() {
alert('asd');
}
cancelButton.click(cancel);
我使用这个 CSS 将其设置为用手悬停:
.cancelButton:hover {
cursor: hand;
cursor: pointer;
}
但是我发现,首先当我将鼠标悬停在元素上时,鼠标指针不会改变。不过,修改元素本身(例如更改 bg-color)的悬停效果效果很好。其次,我附加的 jQuery 点击处理程序也不会触发。
这是 <object>
的一些限制吗?元素或 SVG 的工作原理?任何意见或建议表示赞赏。
最佳答案
根据我的经验,SVG 嵌入为 <object>
元素倾向于吞噬指针事件(因为浏览器在对象元素内部创建了一个新文档,类似于 iframe)。有没有理由你不能只使用 <img>
标签?例如:
someEl = ('#someElement');
cancelButton = $('<img>').attr({
'class': 'cancelButton',
'id':parent_id+'_xbtn',
'src': 'img/cancelBtn.svg'
});
someEl.after(cancelButton);
function cancel() {
alert('clicked');
}
cancelButton.click(cancel);
编辑:
如果您需要使用 <object>
标记(例如,因为您的 SVG 文件引用了外部 Assets ),我的解决方案是创建一个宽度和高度相同的透明覆盖 div,绝对位于对象的顶部,然后在该 div 上绑定(bind)事件。
关于jquery - 嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14784678/