老师你好，这里有个问题是不是冒泡没有阻止成功？？
来源：6-2 事件绑定与取消-on（下）
weixin_慕移动6442865
2019-09-23 18:58:01
这里鼠标移动的时候是不是没有阻止冒泡成功？默认我设置的是其他隐藏只有第一张图是显示的，只有鼠标移动到a标签才会切换，但是现在刷新一下页面只要鼠标移动到页面中它就会把最后一张图显示出来？
但是写了event.stopPropagation();啊，找不到原因。
$(document).ready(function(){
var index=0;
$('a').add(document).on({
mouseenter:function(event){
event.stopPropagation();
index=$(this).index();
demo();
},
keydown:function(event){
event.stopPropagation();
if (event.keyCode == 37) {
index--
if (index < 0) {
index = $('a').length - 1
}
} else if (event.keyCode == 39) {
index++
if (index > $('a').length - 1) {
index = 0
}
}
demo();
}
})
var demo=function(){
$('img').eq(index) .css({ 'display': 'block' }) .siblings() .css({ 'display': 'none' })
}
});
4回答
-
同学你好， 同学不要着急， 老师这里是故意留出这些bug, 在后面的课程中有讲解哦
对于同学能够发现这个bug，可以看出同学很细心， 思考问题也比较严谨， 给你点一个赞。老师这样做的目的， 主要是为了让同学更好的体会到在编程过程中，逻辑严谨的重要性， 以及在编程过程中遇到问题， 我们不要慌张，一点点找到解决方法就可以了， 培养解决问题的能力哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0h019-09-24 -
好帮手慕慕子
2019-09-24
同学你好， 冒泡的写法是对的， 鼠标移入页面就会显示最后一张图片， 是因为同学下图的这种写法表示给a和document同时添加了鼠标移入事件哦
建议： 可以在mousenter事件中判断鼠标移入的是否是a标签， 然后设置index值
同学可以自己下去在测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0h019-09-24 -
weixin_慕移动6442865
提问者
2019-09-23
CSS文件：
*{margin:0;padding:0;border: none;}
html,body{background-color: rgb(21, 135, 228);height: 100%;overflow: hidden;}
span{ display: block; width: 20px; height: 20px; border-radius: 50%; margin:10px auto 30px; background-color: #fff; }
nav{ position: relative; display: flex; width: 78vw; margin:0 auto 20px; justify-content: space-between; }
nav>a{ position: relative; text-decoration: none; border: 2px solid rgb(35, 167, 228); font-size: 15px; padding:10px; background-color: #fff; }
nav:before{ position: absolute; top:50%; margin-top:-5px; width: 100%; height: 10px; background-color: #fff; display: block; content: ''; }
#pic{ position: relative; width: 78vw; height: 40vw; margin:0px auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(8, 1, 3, .8); overflow: hidden; }
img{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; width: 98%; height: 96%;display: none;}
#pic img:nth-of-type(1){
display:block;
}
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width: 100px;height: 100px;background-color: rgb(112, 220, 76);}
</style>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<button class='btn'>没有绑定事件</button>
<button class='bind'>绑定</button>
<button class='unbind'>取消绑定</button>
<button class="one">绑定一次</button>
<div class='box' style="display: none">123</div>
<span></span>
<div id='box'>
<nav>
<a href="#">泸沽湖</a>
<a href="#">丽江古城</a>
<a href="#">茶马古道</a>
<a href="#">云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
<a href="#">昆明郊野公园</a>
<a href="#">欧洲风琴小镇</a>
</nav>
<div id='pic'>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
</div>
</div>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/demo3.js"></script>
</html>
0 -
好帮手慕慕子
2019-09-23
同学你好， 建议： 将你写的HTML和CSS文件完整代码粘贴过来， 便于老师准确高效的帮助你解决问题。祝学习愉快~~~~
0h019-09-23
相似问题