テキストを含むクリック可能なdivがいくつかあります。場合によっては、テキスト自体がハイパーリンクです。
通常、divをクリックしてonclickアクションをトリガーできるようにしたいのですが、ハイパーリンクを直接クリックする場合は、ハイパーリンクアクションのみをトリガーし、divonclickアクションはトリガーしないようにします。
以下のサンプルコードは問題を示しています-ハイパーリンクをクリックすると、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>
イベントリスナーを追加し、イベントをリッスンして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を使用するようにコードを調整しました。これは、長期的にははるかに多くのマイレージを持っています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加