如何将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部分，尝试使用事件委托。

来自docs：

  

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

＆＃13;

＆＃13;

$(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() {...}
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

在@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内容，因此您无法点击它。

Answer 2

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

示例小提琴：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;