您的位置：首页 > Web前端 > JQuery

jQuery 事件冒泡

2017-04-13 16:16 155 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<link rel="stylesheet" href="css/style.css" />
<title></title>
<script>
$(function(){
var count = 0 ;
$("div,p,input").on("click",function(){
alert(count++) ;
}) ;
}) ;
</script>
</head>
<body>
<div><p><input type="button" value="按钮"/></p></div>
</body>
</html>

这样就会产生事件冒泡。会连续三个弹窗。

阻止事件冒泡

event.stopPropagation() ;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<link rel="stylesheet" href="css/style.css" />
<title></title>
<script>
$(function(){
var count = 0 ;
$("div,p,input").on("click",function(){
alert(count++) ;
event.stopPropagation() ;
}) ;
}) ;
</script>
</head>
<body>
<div><p><input type="button" value="按钮"/></p></div>
</body>
</html>

阻止了冒泡。只会产生一个弹窗。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航