第一种:return false:
缺点:直接返回了函数,函数后面的语句没法执行了;
$('.btn').on('click',function(event){
do something ...
return false
})
第二种: event.stopPropagation():
1、阻止事件冒泡这里以click事件为例
<div class="btn1">
<div class="btn2"></div>
</div>
<!--********************************-->
<script>
$('.btn1').on('click',function(event){
console.log('btn1被点击了')
})
$('.btn2').on('click',function(event){
console.log('btn2被点击了')
})
</script>
2、在这里,我们点击 btn2 时,也会触发他父级元素的 click 事件,就是也会输出 btn1被点击了 <br>,怎么办呢?这时我们就要用了到 <strong>event.stopPropagation()<br></strong>
$('.btn2').on('click',function(event){
// ******************
event.stopPropagation();
// ******************
console.log('btn2被点击了')
})
3、这样就好了,但是,如果遇到这样的情况,下面这个 btn2 就不起作用了
<a href="http://www.google.com" class="btn1">
<div class="btn2"></div>
</a>
第三种: event.preventDefault() // 阻止默认事件的冒泡:
$('.btn2').on('click',function(event){
// ******************
event.preventDefault();
// ******************
console.log('btn2被点击了')
})
这样,再点击 btn2 时,a标签就不会再跳转了......