What's the difference between event.stopPropagation and event.preventDefault?
stopPropagation
prevents further propagation of the current event in the capturing and bubbling phases.
preventDefault
prevents the default action the browser makes on that event.
Examples
preventDefault
$("#but").click(function (event) {
event.preventDefault()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
event.preventDefault vs event.stopPropagation
I am not a Javascript expert but as far as I know:
stopPropagation
is used to make sure the event doesn't bubble up the chain. eg. a click on a <td>
tag would also fire click events on it's parent <tr>
, and then its parent <table>
, etc. stopPropagation
prevents this from happening.
preventDefault
is used to stop the normal action of an element, eg. preventDefault
in a click handler on a link would stop the link being followed, or on a submit button would stop the form being submitted.
event.preventDefault() vs. return false vs Event.stopPropagation() and other methods
The rundown:
- You can use
event.preventDefault()
if you only want to prevent the default of the event (in this case, submitting a form). - You can use
return false
(in a jQuery event handler like yours) if you want to both prevent the default and stop propagation of the event to ancestor elements. (Note that that's different from whatreturn false
means in native event handling, as I cover in this blog post.) - Using
event.stopPropagation()
(notEvent.stopPropagation()
) won't prevent the default action at all: the form will still be submitted. - Throwing an error from the handler won't prevent the default action of the event.
- Calling a function that doesn't exist is just throwing an error, see above.
event.preventDefault() vs. return false
return false
from within a jQuery event handler is effectively the same as calling both e.preventDefault
and e.stopPropagation
on the passed jQuery.Event object.
e.preventDefault()
will prevent the default event from occuring, e.stopPropagation()
will prevent the event from bubbling up and return false
will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false
does not stop the event from bubbling up.
Source: John Resig
Any benefit to using event.preventDefault() over "return false" to cancel out an href click?
stopPropagation native event vs javascript event
All events in Javascript fire on the outermost element interacted with and then fire again on every element in it's ancestry until it reaches the body
. In this way the event is firing first on your img
and then again on your a
because your img
is inside the a
.
If this behavior is not desired, that is why you would use stopPropagation
to prevent it from bubbling up the chain. In jQuery, it is easy to check what element originated the event, so you can ignore it in certain cases by using event.target.
if (e.target == this) {
// run code only when this element is the originator of the event
}
When a click event is fired there are basically two veins, the Javascript event, and the native event. If the native event isn't preventDefault()
or return false
somewhere, it is going to fire, regardless of any stopPropagation()
.
Related Topics
How to Highlight Text Using JavaScript
Why Does Babel Rewrite Imported Function Call to (0, Fn)(...)
Display Data Streamed from a Flask View as It Updates
Crockford'S Prototypal Inheritance - Issues With Nested Objects
JavaScript Call() & Apply() VS Bind()
Check If a Value Is an Object in JavaScript
JavaScript Add Leading Zeroes to Date
Indexof Method in an Object Array
How to Replace All Line Breaks in a String With ≪Br /≫ Elements
JavaScript: Remove Event Listener
Evaluating a String as a Mathematical Expression in JavaScript
How to Determine If a Variable Is 'Undefined' or 'Null'
Using Node.Js Require Vs. Es6 Import/Export
Difference Between Variable Declaration Syntaxes in JavaScript (Including Global Variables)
Finding the Max Value of an Attribute in an Array of Objects