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

Posted 2020-09-18 yezi-dream

       在编写功能时总是会出现很多意想不到的问题，现在就讲讲我遇到的两个问题，通过举一个相似的例子来解说。

       <1> 元素互相独立，不存在包含于被包含

            选择城市的按钮，为它绑定点击事件，点击后就弹出城市列表层，城市列表层设置了position与z-index的值来进行布局，然后再点击选择城市按钮，点击事件就不起作用了，反而是城市列表层的点击事件起作用，这说明只有显示在最上面的一层绑定的事件可以起作用，即使最上面的一层没有全部盖住下面的内容，下面的内容绑定的事件也不起作用，所以要想让选择城市按钮绑定的点击事件起作用，就需要为其设置position与z-index值，而且z-index值必须要大于城市列表层设置的z-index的值。

            总结：当整个页面有元素设置position与z-index的值时，为元素绑定事件，只有显示在最上面一层的元素的事件可以起作用。       

      <2>元素存在包含关系

            这个问题和第一个问题有点相似，但又有点不同。城市列表里有多个城市，需要使用事件冒泡取到事件目标，即点击的城市，每个城市都被包含在城市列表里了，虽然城市列表这个上级元素已经设置了position与z-index的值，但这并不意味着子元素就和父级元素在同一层，所以在使用事件冒泡获取事件目标，即子元素时，根本取不到子元素，取到的依然是父级元素，说明子元素与父级元素不在同一层，这个怎么解决呢？我发现只要为子元素设置position:relative就可以获取到，而且不需要再设置z-index的值了。

          总结：当父级元素设置了position与z-index的值，子元素也需要设置position的值，不然事件冒泡获取事件目标时，取不到子元素。

    

        目前我还没想明白为什么当为子元素设置position:relative就可以使得其与父级元素在一层，从而事件冒泡获取事件目标就可以获取到。如果有知道此原理的园友，欢迎在评论区回复，谢谢，大家一起探讨和学习。