javascript
2019-03-05
2019-03-05
本篇文章及后续主要总结一些在实际应用中常见的基础用法。
主要内容:阻止事件向下、阻止默认行为、阻止事件冒泡
一、阻止事件向下:event.stopPropagation()
- Echarts的示例
- 字如其名,停止事件的传播,阻止它被分派到其他 Document 节点
- 常见应用:下拉菜单、退出登录、一些选项
HTML:
1
2
3<div class="btn">点击</div>
<div class="box"></div>
<button class="look">点击看看</button>JS:
1
2
3
4
5
6
7
8
9
10
11
12$('.btn').on('click',(e)=>{
$('.box').fadeIn().click(()=>{
// do something
})
$(document).on('click',()=>{
$('.box').fadeOut()
})
e.stopPropagation();
})
$('.look').click(()=>{
alert('ok')
})二、阻止默认事件:
return false
- 此处使用form表单的submit默认提交
HTML:
1
2
3
4
5
6
7
8
9<style>
form{display: flex;}
.value{flex: 0 0 65px;}
#sub{flex: 0 0 35px;}
</style>
<form action="https://www.baidu.com">
<input type="text" class="value">
<input type="submit" value="提交" id="sub">
</form>强烈说明:千万不要在action里面写提交地址,否则你可能被骂得狗血淋头,这里仅做演示而已
- JS:
1
2
3
4
5
6
7
8$('#sub').click(()=>{
if($('.value').val().length>0){
$('form').submit() // submit()方法
}
else{
return false
}
})
三、阻止事件冒泡
- 两种方法阻止:
return false
、event.stopPropagation()
HTML:
1
2
3
4
5
6
7
8
9<div class="three1">
最外框
<div class="three2">
中间框
<div class="three3">
最小框
</div>
</div>
</div>JS:
1
2
3
4
5
6
7
8
9
10
11$('.three1').click(()=>{
console.log('最大框')
})
$('.three2').click((e)=>{
console.log('中间框')
e.stopPropagation() //方法一
})
$('.three3').click(()=>{
console.log('最小框')
return false // 放法二
})