javascript - 如何将点击事件绑定(bind)到对象标签？

Question

我有这个代码

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

和jquery

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

但是我不能点击事件。

Answer 1

实现这个目标最简单的方法是将对象标签包裹在一个div中，将点击监听器绑定(bind)到div，并添加pointer-events: none。到对象标签的样式。

示例 fiddle :

.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>