Question 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>`无法点击元素。

一种可能性可能是根本不使用 an<object>而是使用一个<img>标签，而不是按照此 SO 答案中的建议：使 html svg 对象也是一个可点击的链接。

2. 问题：空的 HTML 标签

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

你的标签：

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

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

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

展开片段

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>`无法点击元素。

一种可能性可能是根本不使用 an<object>而是使用一个<img>标签，而不是按照此 SO 答案中的建议：使 html svg 对象也是一个可点击的链接。

2. 问题：空的 HTML 标签

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

你的标签：

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

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

@NULL 阅读这里，亲爱的：blog.stackoverflow.com/2014/09 /... 很好用
对于“空 HTML 标签”，这不是问题。这是因为 object 元素受到与 iframe 相同的安全限制，并且不会让主文档知道用户在其中做什么。
@NULL 你的意思是哪种语法？谢谢纠正。编辑答案
我以前从未见过这种语法。我很喜欢。顺便提一句。<input type="button" value="text">没有innerHTML但仍然可以点击。

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>

展开片段

@beginner_ 你能发布一个在 Chrome 中不起作用的小提琴吗？我会添加一个可以在 Chrome 中运行的，我们可以进行比较。
我不知道。据我所知，其余的布局以某种方式与此混淆。诚然，我知道无论如何都必须更改整个方法，因为在使用具有数据属性的对象时，IE11 无法正确显示 svg。当通过 ajax 获取 svg 并将其附加到父级时，它会正确显示它。所以我现在放弃了对象标签，完全解决了这两个问题......
这在当前版本的 Chrome（撰写本文时为 66）中不起作用，但在 IE11 和 Firefox 60 中起作用。

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

1. 问题：事件处理

2. 问题：<object>无法点击元素。

2. 问题：空的 HTML 标签

2. 问题：`<object>`无法点击元素。