老师,我的问题是关于mouseover,mouseout事件?

老师,我的问题是关于mouseover,mouseout事件?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one">
<div class="two">

</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>

$('.two').mouseover(function(){
console.log('two over');
})

$('.two').mouseout(function(){
console.log('two out');
})
$('.one').mouseover(function(){
console.log('one over');
})
$('.one').mouseout(function(){
console.log('one out');
})
</script>
</body>
</html>

老师,结果为什么是one over---one out---two over---one over---two out---one out---one over---one out这样啊?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好!

这个效果是正常的,mouseover 和 mouseout 事件是可以冒泡的,子元素上触发的事件会冒泡到父元素上。可以换成中文,来看下效果:

http://img1.sycdn.imooc.com//climg/5d6346a80001d77e01410249.jpghttp://img1.sycdn.imooc.com//climg/5d6347630001e63d04160187.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师