如何将click事件绑定到object标签？

Question

我有这个代码

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

和jquery

$(".icon-logo").click(function() {
.....
});

但我无法点击事件.

Answer 1

1.问题:事件处理

关于jQuery部分,尝试使用事件委托.

来自文档:

.on()方法将事件处理程序附加到jQuery对象中当前选定的元素集.

$(document).on('click', '.icon-logo', function(event) {
    document.write('Event type: ' + event.type);
    document.write('<br>CSS-Class: ');
    document.write($(this).attr('class'));
});
// As said in the docs, you can attach multiple events to multiple selectors. 
// A typical example of use may be:
// $(document).on('change blur', '.icon-logo .some-other-class', function() {...}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo" style="cursor: pointer;">Click me!</object>

在@Kaiido的评论之后编辑:

2.问题:<object>无法单击元素.

一种可能是不使用的<object>,在所有的,但<img>在这个标签中,而不是所建议的SO回答:使HTML SVG对象也可点击的链接.

2.问题:清空HTML标记

这种标记<object>需要在页面上显示一些内容.

你的标签:

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

没有任何内部HTML内容,因此您将无法单击它.

Answer 2

实现此目标的最简单方法是将对象标签包装在一个 div 中，将点击侦听器绑定到该 div，然后添加pointer-events: none到对象标签的样式中。

样品小提琴：

.clickable {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
}

object {
  width: 100%;
  pointer-events: none;
}

<div class='clickable' onclick='alert("WOW")'>
  <object type='image/svg+xml' data='https://douglasduhaime.com/assets/images/icons/home.svg' />
</div>