关于add和stopPropagation()
var index=0;
var swiper = function() {
$('img').eq(index).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
};
swiper();
$('a').add(document).on({
click:function(){
event.stopPropagation();
index=$(this).index();
swiper();
},
keydown:function(){
// console.log(event.index);
event.stopPropagation();
if(event.keyCode==37){
index=index==0?$('a').length-1:index-1;
console.log(37);
}
if(event.keyCode==39){
index=index==$('a').length-1?0:index+1;
console.log(39);
}
swiper();
}
})
$('a').add(document).on(click....keyup.....)这样写之后相当于a绑定了两个事件，一个是click，一个是keyup，keyup事件只能作用在input上或者是document上所以这里的a仅click事件生效。
document，除了绑定了keyup事件还被绑定了click事件，keyup事件正常响应，但click事件时候，index=$(docuemt).index()值为-1，在$('a).eq(-1)时，等价于选择最后一张，所以会展示最后一张图片
关于stopPropagation()，因为键盘事件对a标签无效，所以主要是针对click的，在点击a标签的时候会触发a和document的click事件，加上之后就可以值触发a的click事件。不然会冒泡，先执行a的click事件再执行document的click事件，而document的click事件会一直显示最后一张图。
但点击非a标签的document区域，一直跳转最后一张图啊
老师帮我看看上面理解对不对，有点绕，但我尽力了，十分感谢
正在回答
同学你好，理解有误差的地方，解答如下：
1、这种写法是相当于绑定了两个事件，一个是click，一个是keydown，a元素也会触发keydown事件，如下：选中a之后，按下键盘后，会触发keydown事件
所以说keydown事件中也需要使用stopPropagation方法阻止事件冒泡。
2、点击非a标签的document区域，此时的$(this)指向document，导致无法获取到对应的index，所以去跳转到最后一张。可以打印下查看输出结果
结果如下：
建议：添加一个判断，当前点击的是a标签时，再设置index值，调用swiper方法。
同学先了解下即可，老师在后面的课程中会有详细的讲解，同学可以继续往后听课。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星