In Javascript, how to preventDefault on a child element from within parent event handler

javascript jquery jquery-events preventdefault
Ben Lee picture Ben Lee · May 11, 2012 · Viewed 8k times · Source

Suppose I have HTML like this:

<div>
    <a href="http://google.com">Google</a>
</div>

And I have an event handler like this (suppose I have jQuery available):

$('div').on('click', function(ev) {
    // ...
});

Is it possible, from within that event handler, to prevent the default action of the <a> link? Or is it too late? (In other words, am I required to attach an event on the <a> or lower to prevent the default link action, or is it possible to stop it in the above handler).

As said above, I have jQuery available if the solution requires it.

Answer

Jamund Ferguson picture Jamund Ferguson · May 11, 2012

This will definitely work:

$('div').on('click', "a", function(e) {
    e.preventDefault();
});

Here's a fiddle: http://jsfiddle.net/xvKNC/1/

Hold on. this seems to work fine for me in Chrome

// prevent default on every click in the div
$('div').on('click', function(ev) {
    ev.preventDefault();
});

See the updated fiddle: http://jsfiddle.net/xvKNC/2/

Related questions

jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <…

Read More
How to detect pressing Enter on keyboard using jQuery?

I would like to detect whether the user has pressed Enter using jQuery. How is this possible? Does it require a plugin? EDIT: It looks like I need to use the keypress() method. I wanted to know if anyone knows …

Read More
How to detect escape key press with pure JS or jQuery?

Possible Duplicate: Which keycode for escape key with jQuery How to detect escape key press in IE, Firefox and Chrome? Below code works in IE and alerts 27, but in Firefox it alerts 0 $('body').keypress(function(e){ alert(e.which); if(…

Read More