stopPropagation() method stops any further propagation of the event up the DOM tree. Additional events on the current target are not affected.
In below example there is a div(holder) with two button(btnSave1 and btnSave2) and we bind click event with each element.
If we click Save1 button then click event of button and div will fired.
But If we click Save2 button only click event of button will fired because we are using stopPropagation() with Save2 button
If you have question why other DOM element's event is generating whereas we are clicking on different element, the answer is even bubbling, to know more about event bubbling click here.
CODE
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.holder').click(function (event) {
alert("div Pressed");
});
$('.btnSave1').click(function (event) {
alert("Save1 Button Pressed");
});
$('.btnSave2').click(function (event) {
event.stopPropagation();
alert("Save2 Button Pressed");
});
});
</script>
</head>
<body>
<div class="holder">
<input type="button" class="btnSave1" value="Save1" />
<input type="button" class="btnSave2" value="Save2" />
</div>
</body>
</html>
DISPLAY
No comments :
Please Give Your Feedback