如何解决css“下层元素阻止了上层元素的点击事件”？

html-css011

如何解决css“下层元素阻止了上层元素的点击事件”？,第1张

使用z-index:来给元素层定位置。\x0d\x0a\x0d\x0aCSS pointer-events\x0d\x0aPointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。\x0d\x0a将它应用到一个元素\x0d\x0a如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素，就像这样：\x0d\x0a \x0d\x0a.overlay { \x0d\x0apointer-events: none\x0d\x0a} \x0d\x0a \x0d\x0a\x0d\x0a浏览器支持\x0d\x0a到目前为止，Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我觉得Opera和IE肯定会尽快赶上，我不知道它们的计划中是否支持它。

在html 中的一种简单的写法。如下：

点击事件执行JavaScript的脚本。如下：

当您遇到一些场景，只需展示时，并且不允许用户点击，您可以用css来控制，这是一种改动量最小，并且不会影响其他的操作；具体写法如下：