What is bubbling?
When a click event is clicked, after the current click event is executed, the outer click event will also be executed. This is a bubbling event.
How to stop bubbling?
Preventing bubbling events also prevents the default behavior. You can use the event.preventDefault() function; if you
don't want to block, you want to stop;
you can use event.stopPropagation() or return false;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My SF Express</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>
#content{border: 1px solid red;}
#msg{border:1px solid #0000FF;margin: 2rem ;}
</style>
</head>
<body class="wrapper">
<div id= "
</div>
<div id="msg"></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script >
<script type="text/javascript">
$(function(){
//Bind the click event for the span element
$('span').bind('click', function (event) {
var txt = $(' #msg').html() + '<p>The inner span element is clicked</p>';
$('#msg').html(txt);
alert(1);
return false;
});
/ /Bind the click event for the span element
$('#content').bind('click', function (event) {
var txt = $('#msg').html() + '<p> The outer div element was clicked</p>';
$('#msg').html(txt);
alert(2);
});
//Bind click event to span element
$('body').bind('click', function (event) {
var txt = $('#msg').html() + '<p>body element is clicked </p>';
$('#msg').html(txt);
alert(3);
});
});
</script>
</html>
javascript bubbling event
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326939164&siteId=291194637
Recommended
Ranking