码迷,mamicode.com
首页 > 其他好文 > 详细

position布局影响点击事件以及冒泡获取事件目标

时间:2018-04-02 18:10:01      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:功能   冒泡   绑定   log   需要   鼠标   区域   点击   seo   

起因:在做一个上传视频的功能时遇到的问题。如下图

上传前:

技术分享图片

上传后:

技术分享图片

上传后,鼠标划入视频区域,添加提示显示,移出视频区域,添加提示隐藏

视频与添加是同级定位的,且提示语z-index更高,在进行mouseover与mouseout操作时,添加提示语不正常闪烁

问题根因:mouseover生效时,添加提示在视频上方,此时鼠标划入了提示区域,mouseout开始生效。

总结:  元素互相独立,不存在包含于被包含关系时,当整个页面有元素设置position与z-index的值时,为元素绑定事件,只有显示在最上面一层的元素的事件可以起作用。

 

后将提示语包含在了视频代码区域内

此时,将添加提示的position,z-index属性去除,发现取不到子元素

总结:元素存在包含关系时,当父级元素设置了position与z-index的值,子元素也需要设置position的值,不然事件冒泡获取事件目标时,取不到子元素

 

position布局影响点击事件以及冒泡获取事件目标

标签:功能   冒泡   绑定   log   需要   鼠标   区域   点击   seo   

原文地址:https://www.cnblogs.com/xwtbk/p/8695430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!