position布局影响点击事件以及冒泡获取事件目标
在编写功能时总是会出现很多意想不到的问题，现在就讲讲我遇到的两个问题，通过举一个相似的例子来解说。
<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就可以使得其与父级元素在一层，从而事件冒泡获取事件目标就可以获取到。如果有知道此原理的园友，欢迎在评论区回复，谢谢，大家一起探讨和学习。
最新文章
- 用markdown简化书写
- [原]Android Studio查询SHA1的方法
- Jquery ajax提交表单几种方法详解
- python之super()函数
- case class inheritance
- js限制input只能输入有效的数字，有且只有一个小数点，第一个不能为小数点-备
- 计算机网络--http代理server的设计与实现
- iot：下一步要做的工作
- php curl Problem with the SSL CA cert (path? access rights?)
- vue计算属性（通过计算得来的属性）
- c# nginx 配置
- 5.枚举和注解_EJ
- C#进阶のMEF注入
- Hbase rowkey设计+布隆过滤器+STORE FILE & HFILE结构
- echarts 通过dom获取echarts实例，批量监听reset
- itcast-spring
- SPARK执行流程
- LINUX下IDEA等工具调试项目时提示：Unable to open debugger port
- Android 应用架构 - Google 推荐
- SQL中的四种语言DDL,DML,DCL,TCL