Problem
They appear to be acting in the same way… Is one new and the other old? Or do various browsers support them?
When I handle events manually (without using a framework), I just check for both and execute both if they are present. (I also return false, but I’m not sure if it works with events added via node.addEventListener.)
(I realize there are a lot of questions, but they’re all quite similar =))
Asked by Rudie
Solution #1
In the capturing and bubbling phases, stopPropagation prevents the current event from propagating further.
preventDefault disables the browser’s default response to that event.
preventDefault
stopPropagation
Only the button’s click handler is called using stopPropagation, but the div’s click handler is never called.
When you use preventDefault, only the browser’s default action is disabled, but the div’s click handler continues to function.
MDN has some documentation on the DOM event attributes and methods, which you can find below:
You can just use preventDefault and stopPropagation for IE9 and FF.
Replace stopPropagation with cancel to support IE8 and below. Replace preventDefault with returnValue in the bubble.
Answered by Raynos
Solution #2
From quirksmode.org:
For event capture, see w3.org:
For event bubbling:
For event cancelation:
The event’s flow (the event listeners) and the event target’s default action are triggered in the following examples when the user clicks on the hyperlink in the web browser (a new tab is opened).
HTML:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>
JavaScript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
Example 1: it generates the following output
DIV event capture
A event capture
A event bubbling
DIV event bubbling
Example 2: modifying the method to include stopPropagation()
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}
as well as the output
DIV event capture
The event listener stopped the event from propagating farther downward and above. It did not, however, prevent the default action (a new tab opening).
Example 3: modifying the method to include stopPropagation()
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}
or the function
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}
as well as the output
DIV event capture
A event capture
A event bubbling
This is due to the fact that both event listeners are associated with the same event target. The event listeners stopped the event from propagating farther upward. They did not, however, prevent the default action (a new tab opening).
Example 4: preventDefault() can be added to any function, for example.
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}
stops the launching of a new tab
Answered by a5hk
Solution #3
return false;
When you summon it, it accomplishes three different things:
This differs from standard (non-jQuery) event handlers, in which returning false does not prevent the event from bubbling up.
preventDefault();
preventDefault(); does one thing: It stops the browsers default behaviour.
When should you utilize them?
We understand what they do, but when should we utilize them? Simply said, it depends on your objectives. Use preventDefault(); if you want to “just” prevent the default browser behaviour. Use return false; when you want to prevent the default browser behaviour and prevent the event from propagating the DOM. In most situations where you would use return false; what you really want is preventDefault().
Examples:
Let’s look at few examples to help you understand:
We’ll look at a JAVASCRIPT sample.
Example 1:
Example 2:
Example 3:
Example 4:
Example 5:
cases:
All three examples will be seen.
I hope these examples have been helpful. To see how these examples function, try putting them all into an HTML file.
Answered by Keval Bhatt
Solution #4
This is a quotation from this page.
Event.preventDefault
The preventDefault method stops an event from performing its default behavior. For instance, you could use preventDefault on an A element to prevent it from leaving the current page when clicked:
//clicking the link will *not* allow the user to leave the page
myChildElement.onclick = function(e) {
e.preventDefault();
console.log('brick me!');
};
//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) {
console.log('you bricked my child!');
};
The event continues to bubble up the DOM even though the element’s default behavior is bricked.
Event.stopPropagation
The second method, stopPropagation, keeps the event’s usual functionality but stops it from propagating:
//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) {
e.stopPropagation();
console.log('prop stop! no bubbles!');
};
//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) {
console.log('you will never see this message!');
};
StopPropagation effectively prevents parent elements from being aware of an event occurring on their kid.
Answered by VladL
Solution #5
Check out this short and sweet 4 minute read with examples from the source of the above item.
Answered by Junaid
Post is based on https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault