zoukankan      html  css  js  c++  java
  • position布局影响点击事件以及冒泡获取事件目标

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

    上传前:

    上传后:

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

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

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

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

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

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

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

  • 相关阅读:
    307.区域与检索--数组可修改
    202.快乐数
    263.丑数
    205.同构字符串
    204.计数质数
    40.组合总和Ⅱ
    811.子域名访问计数
    39.组合总和
    udp与tcp
    SQL复习
  • 原文地址:https://www.cnblogs.com/xwtbk/p/8695430.html
Copyright © 2011-2022 走看看