事件冒泡
事件冒泡:子级和父级绑定相同的事件,触发子级的事件,会同时触发父级的事件
事件冒泡解决方法:
1、给子级加return false;
2、给子级加e.stopPropagation()
标签默认行为:标签自身带有的行为,比如a标签的跳转,表单的自动提交
阻止默认行为:
1、给标签加return false;
2、e.preventDefault();
PS:要将事件冒泡和鼠标移入事件mouseover和mouseout区分开
案例:
(1)html
<div class="box">
<p></p>
</div>
<div class="two"></div>
<a href="#l">超链接</a>
(2)css
.box{
width: 200px;
height: 200px;
background: green;
}
.box>p{
width: 100px;
height: 100px;
background: tomato;
}
.two{
width: 200px;
height: 200px;
background: yellow;
display: none;
}
(3)jQuery
$('.box>p').click(function(e){
console.log('这是P');
$('.two').css('display','block');
// return false;
e.stopPropagation();
})
$('.box').click(function(event) {
console.log('这是div');
$('.two').css('display','none');
// return false;
event.stopPropagation();
});
$(document).click(function(event) {
console.log('这是document');
});
$('a').click(function(e) {
// return false;
e.preventDefault();
});

浙公网安备 33010602011771号