What's the Difference Between Event.Stoppropagation and Event.Preventdefault

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 what return false means in native event handling, as I cover in this blog post.)
  • Using event.stopPropagation() (not Event.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



Leave a reply



Submit