对象元素中嵌入的SVG上的鼠标指针悬停/jquery单击事件不起作用

Question

我正在使用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颜色）效果良好。其次，我附加的jQuery点击处理程序也没有启动。

这是<object>元素或SVG工作方式的限制吗？欢迎提出任何意见或建议。

Answer 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上绑定事件。