如何將點擊事件綁定到對象標簽？

Question

我有這個代碼

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

和jQuery

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

但我無法點擊事件。

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>元素無法單擊。

一種可能是根本不使用<object> ，而是使用<img>標記代替此SO答案中所建議的： 使html svg對象也成為可點擊的鏈接 。

---

2.問題：HTML標記為空

這種標記 <object>需要一些內容才能顯示在頁面上。

您的標簽：

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

沒有任何內部HTML內容，因此您將無法單擊它。

Answer 2

實現此目標的最簡單方法是將對象標記包裝在div中，將單擊偵聽器綁定到div，然后添加pointer-events: none將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>