stop | prevent | prevent "same element"
bubbling | default action | event handlers
return false Yes Yes No
preventDefault No Yes No
stopPropagation Yes No No
stopImmediatePropagation Yes No Yes
Example :
<span class="stop">Stop Test</span> | <span class="false">Return False</span> | <span class="none">Do None</span>| <span class="propagation">Stop propagation</span>
<div class="r"></div>
$("span.stop").click(function(e) {
$(".r").empty().append("<h1>Stop 1</h1>");
e.stopImmediatePropagation();
}).click(function() {
$(".r").append("<h1>Stop 2</h1>");
return false;
}).click(function() {
$(".r").append("<h1>Stop 3</h1>");
});
$("span.propagation").click(function(e) {
$(".r").empty().append("<h1>Stop propagation 1</h1>");
e.stopPropagation();
}).click(function() {
$(".r").append("<h1>Stop propagation 2</h1>");
return false;
}).click(function() {
$(".r").append("<h1>Stop propagation 3</h1>");
});
$("span.false").click(function(e) {
$(".r").empty().append("<h1>Return 1</h1>");
return false;
}).click(function() {
$(".r").append("<h1>Return 2</h1>");
return false;
}).click(function() {
$(".r").append("<h1>Return 3</h1>");
});
$("span.none").click(function(e) {
$(".r").empty().append("<h1>Return 1</h1>");
}).click(function() {
$(".r").append("<h1>Return 2</h1>");
}).click(function() {
$(".r").append("<h1>Return 3</h1>");
});
$(document.body).click(function() {
$(".r").append("<h1>Body Click</h1>");
});
output:
Stop Test | Return False | Do None| Stop propagation
Stop 1
Stop Test | Return False | Do None| Stop propagation
Return 1
Return 2
Return 3
Stop Test | Return False | Do None| Stop propagation
Return 1
Return 2
Return 3
Body Click
Stop Test | Return False | Do None| Stop propagation
Stop propagation 1
Stop propagation 2
Stop propagation 3
Jsfiddle demo http://jsfiddle.net/markcoleman/PcUfP/
No comments:
Post a Comment
comment here