事件冒泡可能会引发问题，我明明就点一个，你干嘛给我触发一堆
所以，要对事件的作用范围进行限制
通过事件对象来实现，function（event）,该事件对象在函数触发时自动创建，在函数结束时自动销毁
<body>
<div id = content style="border:double">
外层div 元素
<span style = "border:groove">内层span元素</span>
外层div元素
</div>
<div id = msg></div>
</body>
<script>
$(function(){
//为span 元素绑定click 事件
$('span').click(function(event){
var txt = $("#msg").html()+"<p style='border:double'>内层span元素被单击</p>";
$('#msg').html(txt);
event.stopPropagation();//停止事件冒泡
})
})
$(function(){
//为div绑定click事件
$('#content').click(function(event){
var txt = $("#msg").html()+"<p style = 'border:double'>外层div被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
})
})
$(function(){
//为body绑定click事件
$('body').click(function(){
var txt = $("#msg").html()+"<p style = 'border:double'>body元素被单击</p>";
$("#msg").html(txt);
});
});
</script>这样，点击span的时候就不会再触发div和body的click函数
2.阻止元素默认行为 preventDefault()
<body>
<form action="panda.html">
用户名：<input type = 'text' id = "username"/>
<input type = 'submit' value ='提交' id='sub'/>
</form>
<div id= msg ></div>
</body>
<script>
$(function(){
$('#sub').click(function(event){
var username = $('#username').val();
if(username ==''){
$('#msg').html("<p>姓名不能为空</P>");
event.preventDefault();//阻止默认行为
}
});
});
</script>
tip:
同时调用阻止冒泡事件event.stopPrapagation()和阻止默认行为event.stopDefault()方法= return false;
return false就是阻止默认的接下来的方法和人工添加的可能触发的方法。
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
