如何将点击事件绑定到对象标签？

Question

我有这个代码

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

和jquery

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

但我无法点击事件。

Answer 1

实现这一目标的最简单方法是将对象标签包装在一个 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>

Answer 2

1。问题：事件处理

关于 jQuery 部分，尝试使用事件委托。

来自docs：

.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 答案中所建议的那样：make an html svg object also a clickable link。

---

2。问题：空 HTML 标记

这种标签<object>需要一些内容才能显示在页面上。

你的标签：

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

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