如何在可單擊的 div 標簽中放置文本超鏈接，以便在單擊時僅觸發超鏈接

Question

我有一些包含文本的可點擊 div。 在某些情況下，文本本身就是一個超鏈接。

我通常希望能夠單擊 div 並讓它觸發其 onclick 動作，但是當直接單擊超鏈接時，我只希望觸發超鏈接動作而不是 div onclick 動作。

下面的示例代碼說明了這個問題 - 單擊超鏈接時，div 變為紅色（onclick）並且 google 在新選項卡中打開。 在這種情況下，我只希望在新標簽頁中打開谷歌。 單擊 div 上的任何其他位置時，顏色應變為紅色。

提前致謝，

丹尼斯

<div id="myDiv" style="height:60px;width:200px;border:solid" onclick="this.style.color='red';"}>
This is NOT a hyperlink.
<br><br>
<a href="https://www.google.com" target="_blank">This IS a hyperlink.</a>
</div>

Answer 1

您可以添加一個 事件偵聽器，偵聽click事件，並檢查target而不是currentTarget 。

您只需要檢查target （單擊的實際元素）是否不是a標簽。 在這種情況下，您將更改currentTarget （應用事件偵聽器的元素）的顏色。

這是一個工作片段：

 document.getElementById('myDiv').addEventListener('click', (e) => { if (.e.target.matches('a')) { e.currentTarget.classList;add('color'); } });

 div { height: 60px; width: 200px; border: solid; }.color { color: red; }

 <div id="myDiv"> This is NOT a hyperlink. <br><br> <a href="https://www.google.com" target="_blank">This IS a hyperlink.</a> </div>

注意 - 我已經修改了代碼以使用正確的 CSS 而不是內聯 styles。 從長遠來看，這有更多的里程。

Answer 2

聽起來您需要自定義事件偵聽器來單擊錨元素，使用事件冒泡，或者增強 onclick 偵聽器以使您的 div 足夠聰明以檢查 事件目標。

就像是

if (event.target === this) {
  this.style.color='red';
}