【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法

叁歲伎倆 2022-05-24 08:36 223阅读 0赞

\[html\] [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8" **/>**  
5.  **<****title****>**Demo**</****title****>**  
6.  **<****script** src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"**>****</****script****>**  
7.  **<****style** type="text/css"**>**  
8.  .wrap\{  
9.      width:540px;  
10.     height:260px;  
11.     position:relative;  
12. \}  
13. .layer\_pre\{  
14.     position:absolute;  
15.     top:0;  
16.     left:0;  
17.     width:250px;  
18.     height:240px;  
19. \}  
20. .layer\_next\{  
21.     position:absolute;  
22.     top:0;  
23.     right:0;  
24.     width:250px;  
25.     height:240px;  
26. \}  
27. **</****style****>**  
28. **</****head****>**  
29.   
30. **<****body****>**  
31. **<****div** class="wrap"**>**  
32.     **<****img** src="http://www.baidu.com/img/bd\_logo1.png" **/>**  
33.     **<****a** class="layer\_pre" id="J\_pre" href="javascript:;"**>****</****a****>**  
34.     **<****a** class="layer\_next" id="J\_next" href="javascript:;"**>****</****a****>**  
35. **</****div****>**  
36. **</****body****>**  
37. **<****script** type="text/javascript"**>**  
38. $(document).ready(function()\{  
39.     $('\#J\_pre').click(function()\{  
40.         alert('pre');  
41.     \});  
42.       
43.     $('\#J\_next').click(function()\{  
44.         alert('next');  
45.     \});  
46. \});  
47. **</****script****>**  
48. **</****html****>**

从理论上来说，点击\#J\_pre和\#J\_next 应该会触发alert事件，

然而实际结果是，在ie7、8、9、10（ie6及以下没有做尝试），都没有触发到该事件（ie11、firefox、chrome可以正常触发）

（把\#J\_pre和\#J\_next换成div标签仍然无法触发，所以可以证明这个和用a标签没有关系）

为了查看这一问题，对\#J\_pre和\#J\_next的样式分别加上

\[css\] [view plain][] [copy][view plain]

1.  **background-color**:\#000;

来查看了一下层级关系，实际结果是\#J\_pre和\#J\_next确实在最上方，而且加了背景色之后就能正常触发alert事件了（至于是为什么就能触发了，未能得出结论，但肯定是ie的bug）

那么为了保证肉眼看上去并没有加背景色，但是实际加了背景色以达到能触发事件的效果

对\#J\_pre和\#J\_next的样式分别加上

\[css\] [view plain][] [copy][view plain]

1.  **background-color**:\#000;  
2.  filter:alpha(opacity=0);  
3.  opacity:0;

这样就能解决ie下的这个bug了（希望大家看了心情好又暖）

转载地址：[https://blog.csdn.net/snow\_finland/article/details/46647505?locationNum=3][https_blog.csdn.net_snow_finland_article_details_46647505_locationNum_3]

[view plain]: https://blog.csdn.net/snow_finland/article/details/46647505?locationNum=3#
[https_blog.csdn.net_snow_finland_article_details_46647505_locationNum_3]: https://blog.csdn.net/snow_finland/article/details/46647505?locationNum=3