-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
-
<script type="text/javascript">
-
-
$(document).on("click",".test",function(event){
-
event.stopPropagation();
-
console.info("test is clicked");
-
})
-
$(document).ready(function(){
-
$("#hi").click(function(event){
-
// event.stopPropagation(); //(1)
-
console.info("hi is clicked");
-
})
-
$("#hello").click(function(event){
-
// event.stopPropagation(); //(2)
-
console.info("hello is clicked");
-
})
-
$("#hi").addClass("test");
-
})
-
-
</script>
-
</head>
-
<body>
-
<div style="border:1px solid red;width:400px;height:400px;" id="hello">hello;
-
<div style="border:1px solid green;width:200px;height:200px;margin:auto;" id="hi">hi;
-
</div>
-
</div>
-
</body>
-
</html>
代码的输出结果是:
hi is clicked
hello is clicked
test is clicked
可见hi是原始方式绑定的,最先得到调用;
然后hello消息到达;
虽然hi被绑定两次,但是另一种是用document的中的class来绑定的所以消息最后到达;所以虽然test中有event.stop并不能阻止hello得到激活;相反hello中stop会阻止test的激活;
阅读(992) | 评论(0) | 转发(0) |
