嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用
Posted
技术标签:
【中文标题】嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用【英文标题】：Mouse pointer hover/jquery click event on SVG embedded in object element not working 【发布时间】：2013-01-24 22:24:26 【问题描述】：我正在使用 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;
但是我发现，首先当我将元素悬停时，鼠标指针并没有改变。不过，修改元素本身（例如更改背景颜色）的悬停效果可以正常工作。其次，我附加的 jQuery 点击处理程序也不会触发。
这是 <object> 元素或 SVG 工作方式的一些限制吗？任何 cmets 或建议表示赞赏。
【问题讨论】：
在cursor:hand 之后添加cursor:pointer 会将光标设置为指针。只需删除 cursor:pointer 即可解决该问题
并且您的 $(this) 调用不属于任何函数 - 除非这只是代码 sn-p 的结果，否则我认为这意味着 $(this) 指的是全局对象，这将不是你想要的
这是一个代码 sn-p 的结果，对不起。这一切都在一个函数内部，它附加在有问题的元素之后就好了。 cursor: pointer 是现代浏览器使用的手的名称，但旧 IE 使用 hand，因此两者都需要。如果我删除一个它在 FF、Chrome 等中不起作用，如果我删除另一个它在 IE 中不起作用。
为了清楚起见，我删除了对 $(this) 的引用。
您可以创建一个仅限 ie 的类，一个 html5 样板：<!--[if lt IE 7]> <html class="ie" lang="en"> <![endif]--> 然后在该类中指定 hand 参考：.ie cursor: hand;
【参考方案1】：
根据我的经验，嵌入为 <object> 元素的 SVG 倾向于吞下指针事件（因为浏览器会在对象元素内创建一个新文档，类似于 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 文件引用了外部资源），我的解决方案是创建一个具有相同宽度和高度的透明覆盖 div，绝对位于对象的顶部，并且而是在该 div 上绑定事件。
【讨论】：
我会试试的，谢谢！现在我刚刚保存了一个 SVG 的 PNG 并且一直在使用它。 嗨，我真的很抱歉。这确实有效，但在某些较旧的浏览器中不起作用，所以我没有在我的项目中使用它，我以为我已经接受了。以上是关于嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用的主要内容，如果未能解决你的问题，请参考以下文章