mouseover和mouseout事件

mouseover和mouseout事件

http://img1.sycdn.imooc.com//climg/5dcf6e2909dd1e2b05260243.jpg

mouseover和mouseout事件为什么不是one over---two over---one over---two out---one out---one out这样。为什么会多出一个---one out和---one over?

正在回答

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

4回答

同学你好,问题解答如下:

你可以这样想,当移入two的时候,暂时移出了one(因为鼠标直接接触的是two),而two又是one的子元素,所以也是移入了one 。那么移入two的顺序就是:移出one---移入two---移入one。

前面‘好帮手慕糖’老师也说过了:

http://img1.sycdn.imooc.com//climg/5dd0abf3091871ab07460171.jpg

记住mouseover和mouseleave有这种情况就好。

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

好帮手慕糖 2019-11-16 19:09:25

同学你好,这个是由于移出子元素的时候,属于离开了父元素的区域,所以触发了父元素的移出事件。

也是冒泡的一种情况。可以使用mouseenter(移入)和mouseleave(移出)这个事件来解决,与mouseover事件的使用方式是一样的,就是换下名字就可以了。

另,建议:同学之后提问题,有代码的,可以直接将代码赋值粘贴过来,便于准确的定位与解决问题。

祝学习愉快!

  • 提问者 慕尼黑5122342 #1
    鼠标进入two的时候,是触发two的mouseover事件,由于冒泡而触发one的mouseover事件,但为什么鼠标进入two的时候会先触发one的mouseout事件,这个用冒泡要怎么解释?
    2019-11-16 19:45:15
提问者 慕尼黑5122342 2019-11-16 18:08:58

http://img1.sycdn.imooc.com//climg/5dcfca2409350d3305390282.jpg

我是问为什么进入two的时候会触发one out。离开two的时候为什么会触发one over?

好帮手慕糖 2019-11-16 14:37:02

同学你好,关于你的问题,回答如下:

1、可能是有事件冒泡引起的;事件冒泡就是触发子级事件的同时会触发它先辈元素上绑定与子级元素相同的事件。

2、所以在移入子元素的时候,同时触发了父元素的同类型的事件。

3、修改方案可以参考如下两种:

(1)使用event.stopPropagation()方法阻止事件冒泡,可以参考如下使用方式,在function中写事件源对象的参数,event

http://img1.sycdn.imooc.com//climg/5dcf985909a713ee07660183.jpg

(2)使用另一种鼠标移入移出事件,即:mouseenter(移入)和mouseleave(移出)

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

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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