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加一个背景色,问题就解决了。

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

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

时间: 2024-08-27 03:26:33

IE8,input事件穿透的相关文章

input事件在ie9以下不兼容问题完美解决

上周四好不容易加了几天班把刚接手的一个pc页面做完,周五同事说要兼容ie7~ie9,结果在上面一跑,输入都没法输入. 我的需求是用6个span作为虚拟的密码输入框,实际上是用一个藏在页面里的input来实现输入的.如下图 上面是我要实现的页面,和页面结构dom,就是点击span的的父节点div的时候,要让input获取焦点.左边是input,为了给大家展示就先不藏起来了,对了,千万别用display:none来隐藏input,否则无法获取焦点. 先来给大家复习一下input标签的所有事件: 1.

HTML5 input事件检测输入框变化

之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下: 如果我们页面上有这样一个简单到极致的输入框: 1 <input type="text"> 那么我们现在用jquery给它绑定input事件,如下: 1 $("input:text").bind("input proper

如何让触摸事件穿透一个View

偶然间发现,如何屏蔽或者让触摸事件穿透一个view是一个很简单的事情. 现象: 源码: // // ViewController.m // UserInteraction // // Created by YouXianMing on 14/10/23. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "ViewController.h" @interface ViewController () @

Android4.0 input事件输入流程详解(中间层到应用层)

在Android系统中,类似于键盘按键.触摸屏等事件是由WindowManagerService服务来管理的,然后再以消息的形式来分发给应用程序进行处理.系统启动时,窗口管理服务也会启动,该服务启动过程中,会通过系统输入管理器InputManager来负责监控键盘消息.当某一个Activity激活时,会在该Service下注册一个接收消息的通道,表明可以处理具体的消息,然后当有消息时,InputManager就会分发给当前处于激活状态下的Activity进行处理. InputManager的启动

支持事件穿透?使用pointer-events样式

使用绝对定位元素,让元素A完全盖住元素B时,如何通过元素A来响应元素B的事件呢? 上图可以用下面的SVG代码来实现: <svg width="200" height="180"> <rect x="50" y="50" width="50" height="50" fill="#f34b5b" onclick="alert('Clicked

转载:事件穿透

前言 小伙伴们在开发中是否遇到过这样的需求呢,一个控件的某个部分被另外一个控件遮挡住,当点击这个重叠部分时,需要响应被遮盖控件的点击事件,就如下图所示 当我们点击区域3时,响应蓝色按钮的点击事件,点击区域1和2时,响应红色按钮的点击事件,对于区域1和3没什么好说的,那如何让红色按钮响应区域2的点击呢?这就是笔者今天要讲的内容. 事件传递 大家应该都知道,事件从应用程序开始,按照从上到下的顺序(UIApplication -> UIWindow -> rootViewController -&g

屏幕事件穿透和拦截分析

事件穿透和拦截机制同样并不是deviceone平台独有的,这个机制几乎是所有和UI相关的技术都共有,了解一下非常有必要.我们会以一个简单的例子来描述事件处理机制运行的过程. 屏幕事件处理机制 我们先假定是手机屏幕显示一个UI,里面包括了4个View,这些View都是树状结构,父View下包含一个或多个子View,其中最上层的View和屏幕大小是一致的,参考下图: 我们可以看到view1有一个子节点view2,view2包含2个子节点view3和view4. 假如我们点击屏幕一个位置,会产生一个事

即时搜索:对于ios自带输入法输入中文时多次触发input事件的处理

实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由于搜索的关键字不得法,没有即时找到合适的方案,后来终于在网上找到了解决方案,现记录如下: 代码实现 /** * @param flag: 用于标记是否是非直接的文字输入 */ var flag = false; $('#id').on({ 'compositionstart': function()

input事件中文触发多次问题研究

我们在网页中经常会遇到实时搜索的情况,或者其他类似需要input实时响应的问题,一般情况下,我们是利用input和propertychange事件来监听input内容的变化来响应,但是有一个问题就是当输入汉字的时候,可能我们要输入 '实时' 的时候,我们的input框中会出现 'shishi'直到我们的空格才会变成 '实时',这也就意味着我们依次响应了 's','sh','shi','shis','shish','shishi','实时',前面的结果明显不是我们需要的 ,造成了我们很多次无用的提