How can I place a text hyperlink in a clickable div tag such that only the hyperlink is triggered when clicked

I have some clickable divs which contain text. In some cases the text itself is a hyperlink.

I would like to generally be able to click on the div and have it trigger its onclick action, however when clicking directly on a hyperlink, I only want the hyperlink action to trigger and not the div onclick action.

The below sample code illustrates the issue - when clicking the hyperlink, the div turns red (onclick) AND google opens in a new tab. In this scenario I only want google opened in a new tab. When clicking anywhere else on the div the color should change to red.

Thanks in advance,

Dennis

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

https://stackoverflow.com/questions/65535111/how-can-i-place-a-text-hyperlink-in-a-clickable-div-tag-such-that-only-the-hyper January 02, 2021 at 08:52AM