[英]How to bind click event to object tag?
I have this code 我有这个代码
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>
and jquery 和jQuery
$(".icon-logo").click(function() {
.....
});
but I can't click event. 但我无法点击事件。
Concerning the jQuery part, try to use event delegation. 关于jQuery部分,请尝试使用事件委托。
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
.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>
Edit after @Kaiido's comment: 在@Kaiido评论后编辑:
<object>
element can't be clicked. <object>
元素无法单击。 One possibility could be to not use an <object>
at all but an <img>
tag instead as suggested in this SO answer: make an html svg object also a clickable link . 一种可能是根本不使用
<object>
,而是使用<img>
标记代替此SO答案中所建议的: 使html svg对象也成为可点击的链接 。
This kind of tag
<object>
needs some content to show up on the page.
这种标记
<object>
需要一些内容才能显示在页面上。
Your tag:
您的标签:
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>
is not having any inner HTML-Content, so you won't be able to click it.
没有任何内部HTML内容,因此您将无法单击它。
The easiest way to accomplish this goal is to wrap the object tag in a div, bind the click listener to the div, and add pointer-events: none
to the object tag's styles. 实现此目标的最简单方法是将对象标记包装在div中,将单击侦听器绑定到div,然后添加
pointer-events: none
将pointer-events: none
添加到对象标记的样式。
Sample 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.