如果不清除冒泡，和清除冒泡的区别在哪？我在不清除冒泡的情况下打印index，也只打印一次

$(document).ready(function(){

var index=0;

$('a').add(document).on({

mouseenter:function(event){

index=$(this).index();

swiper();

keydown:function(event){

if(event.keyCode==37){

index=index>0?--index:$('a').length-1;

console.log(index);

}

else if(event.keyCode==39){

index=index<$('a').length-1?++index:0;

}

else{

return true;

}

swiper();}

});

var swiper=function(){

$('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'});

}

});

源自：jQuery事件 6-2 事件绑定与取消-on（下）

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-12-11 12:16:42

同学你好，a元素需要点击访问之后才会支持keydown事件，和document不一样，类似的还有input，textarea等标签，自己可以测试下。

祝学习愉快！

好帮手慕星星 2019-12-11 12:03:59

同学你好，因为代码中给a和document元素都绑定了mouseenter事件：

所以移入document的时候会触发，但是当你移入a的时候并不会再次触发document的移入事件。

祝学习愉快！

提问者王嘉炜 #1

那keydown事件是否冒泡，我给a和document绑定的keydown事件，只有一个元素触发了事件，也只打印了一次

2019-12-11 12:09:40

好帮手慕星星 2019-12-11 11:49:49

同学你好，这里不清除事件冒泡也是可以的，因为mouseenter事件本身就是不冒泡的，换成mouseover事件才会冒泡。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

提问者王嘉炜 #1

如果mouseenter不冒泡，为什么我鼠标移入浏览器的时候，index就被打印出来了

2019-12-11 11:59:30
提问者王嘉炜 #2

$(document).ready(function(){ var index=0; $('a').add(document).on({ mouseenter:function(event){ index=$(this).index(); swiper(); console.log(index); }, keydown:function(event){ if(event.keyCode==37){ index=index>0?--index:$('a').length-1; console.log(index); } else if(event.keyCode==39){ index=index<$('a').length-1?++index:0; } else{ return true; } swiper();} }); var swiper=function(){ $('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'}); } });

2019-12-11 12:00:33