IE8,input事件穿透

    连续加班一个半月，项目昨天晚上12:08终于上线了；然后处理了一些新发现的bug；一直熬到凌晨五点半才吃点宵夜回家睡觉。然后下午这会过来上班；回想昨晚的场景，真的跟打仗一样。。然后发现了一个比较有意思的bug；称之为“事件穿透”！，问题只在纯IE8浏览器下重现（IE9，10，11的的IE8模式切换不重新）。

场景大概是这样的；首页有一个浮动的登录框；然后页头有一个导航（有链接），下面还有一个轮播图，而且有链接；如下图所示：

    然后，IE8下，当你准备在输入框输入时，忽然发现点了一下，页面居然跳转了；然后就开始定位分析。

跳转的url，是轮播图的url，或者时导航的url。由于我们使用了的是开源的layer.ui组件。

网址：http://layer.layui.com/api.html 分析了弹窗的z-index,zoom，定位等等。搞了好久没有找到方案。

对比一下chrome和IE8的样式。

IE8：

chrome下：

发现了背景好像不太一样；然后想了一下，居然事件穿透了，name如果给input加一个背景色或者背景图片是不是就可以了。

试了一下果真，如果给input加一个背景色，问题就解决了。

试了一下，如果背景色是一张半透明的图片，也是可以的。

写篇博客记录一下，希望对遇到同样问题的“道友”有所帮助。

转载于:https://blog.51cto.com/shuizhongyue/1699644