How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Use stopPropagation method, see an example:

$("#clickable a").click(function(e) { e.stopPropagation(); }); 

As said by jQuery Docs:

stopPropagation method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Keep in mind that it does not prevent others listeners to handle this event(ex. more than one click handler for a button), if it is not the desired effect, you must use stopImmediatePropagation instead.

Here my solution for everyone out there looking for a non-jQuery code (pure javascript)

document.getElementById("clickable").addEventListener("click", function(e) { e = window.event || e; if(this === e.target) { // put your code here } }); 

Your code wont be executed if clicked on parent's children

If you do not intend to interact with the inner element/s in any case, then a CSS solution might be useful for you.

Just set the inner element/s to pointer-events: none

in your case:

.clickable > a { pointer-events: none; } 

or to target all inner elements generally:

.clickable * { pointer-events: none; } 

This easy hack saved me a lot of time while developing with ReactJS

Browser support could be found here: http://caniuse.com/#feat=pointer-events

Inline Alternative:

<div> <!-- Other content. --> <a onclick='event.stopPropagation();' href="http://foo.example">I don't want #clickable to handle this click event.</a> </div> 

You can also try this

$("#clickable").click(function(event) { var senderElementName = event.target.tagName.toLowerCase(); if(senderElementName === 'div') { // Do something here } else { // Do something with <a> tag } }); 

Writing if anyone needs (worked for me):

event.stopImmediatePropagation() 

From this solution.

I compare to ev.currentTarget when this is not available (React, etc).

$("#clickable").click(function(e) { if (e.target === e.currentTarget) { window.location = url; return true; } }) 

Using return false; or e.stopPropogation(); will not allow further code to execute. It will stop flow at this point itself.

If you have multiple elements in the clickable div, you should do this:

$('#clickable *').click(function(e){ e.stopPropagation(); }); 

e.stopPropagation() is a correct solution, but in case you don't want to attach any event handler to your inner anchor, you can simply attach this handler to your outer div:

e => { e.target === e.currentTarget && window.location = URL; } 

Here's an example using Angular 2+

For example, if you wanted to close a Modal Component if the user clicks outside of it:

// Close the modal if the document is clicked. @HostListener('document:click', ['$event']) public onDocumentClick(event: MouseEvent): void { this.closeModal(); } // Don't close the modal if the modal itself is clicked. @HostListener('click', ['$event']) public onClick(event: MouseEvent): void { event.stopPropagation(); } 

If it is in inline context, in HTML try this:

onclick="functionCall();event.stopPropagation(); 

You need to stop the event from reaching (bubbling to) the parent (the div). See the part about bubbling here, and jQuery-specific API info here.

for those that are not using jQuery

document.querySelector('.clickable').addEventListener('click', (e) =>{ if(!e.target.classList.contains('clickable')) return // place code here }) 

Here is a react based solution example. In my case I had a modal contact form that had a transparent outer wrapper. I wanted any click outside of the modal to close the modal.

import React, { useState } from 'react'; function Component() { const [contactOpen, setContactOpen] = useState(false); const handleContactToggle = () => { if (e.target === e.currentTarget) { //e.target === item the onClick is attached to. //e.currentTarget === item that received the click // If these do not match the click is somewhere inside the InnerComponent setContactOpen(!contactOpen); } }; const ContactModalClass = (contactOpen) ? styles.contactModalOpen : styles.contactModalClosed function handleModalToggle(e) { if (e.target === e.currentTarget) { handleContactToggle(); } } <div className={ContactModalClass} onClick={e => handleContactToggle(e)} id='OuterWrapper-Click-To-Close'> <InnerComponent id='Inner-Form-Click-Does-Not-Trigger-Outer-Function' /> </div> } 

Note: Question appeared for my react search hence the react answer.

Most of the answers here won't work if the clicked parent and/or child have complex structure.

Or if you have other plugins/frameworks that also attach click events listeners (stopPropagation will break that).

Or if the child anchor has another child tag like a span or an svg, in that case event.target will be that child element, not the anchor.

The only reliable way to prevent click from firing in child anchor is:

if (event.target && event.target.closest('a')) return false; //traverse to nearest anchor! 

https://caniuse.com/element-closest

To specify some sub element as unclickable write the css hierarchy as in the example below.

In this example I stop propagation to any elements (*) inside td inside tr inside a table with the class ".subtable"

$(document).ready(function() { $(".subtable tr td *").click(function (event) { event.stopPropagation(); }); }); 

You can check whether the target is not your div-element and then issue another click event on the parent after which you will "return" from the handle.

$('clickable').click(function (event) { let div = $(event.target); if (! div.is('div')) { div.parent().click(); return; } // Then Implement your logic here } 

Here is a non jQuery solution that worked for me.

<div style="background:cyan; width:100px; height:100px;" onclick="if (event.srcElement==this) {console.log('outer');}"> <a style="background:red" onclick="console.log('inner');">Click me</a> </div>

In case anybody is finding this post and using an anchor tag as their parent element, you should try:

event.preventDefault() 

in your child onclick event. Found this solution here: https://stackoverflow.com/a/1607890/17225652

In case someone had this issue using React, this is how I solved it.

scss:

#loginBackdrop { position: absolute; width: 100% !important; height: 100% !important; top:0px; left:0px; z-index: 9; } #loginFrame { width: $iFrameWidth; height: $iFrameHeight; background-color: $mainColor; position: fixed; z-index: 10; top: 50%; left: 50%; margin-top: calc(-1 * #{$iFrameHeight} / 2); margin-left: calc(-1 * #{$iFrameWidth} / 2); border: solid 1px grey; border-radius: 20px; box-shadow: 0px 0px 90px #545454; } 

Component's render():

render() { ... return ( <div id='loginBackdrop' onClick={this.props.closeLogin}> <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}> ... [modal content] ... </div> </div> ) } 

By a adding an onClick function for the child modal (content div) mouse click events are prevented to reach the 'closeLogin' function of the parent element.

This did the trick for me and I was able to create a modal effect with 2 simple divs.

If a child element is clicked, then the event bubbles up to the parent and event.target !== event.currentTarget.

So in your function, you can check this and return early, i.e.:

var url = $("#clickable a").attr("href"); $("#clickable").click(function(event) { if ( event.target !== event.currentTarget ){ // user clicked on a child and we ignore that return; } window.location = url; return true; }) 

This is what you are looking for

mousedown event. this works on every DOM elements to prevent javascript focus handler like this:

$('.no-focus').mousedown(function (e) { e.prevenDefault() // do stuff } 

in vue.js framework, you can use modifier like this:

<span @mousedown.prevent> no focus </span> 

Note that using on the input will prevent text selection handler