浏览器的聚焦

这又是一个老话题了, 不过最近在详写jQuery事件模拟的时候顺便又回顾了一次,做个记录巩固下吧

当然这里所说的问题都是在旧版本的浏览器中出现的兼容问题,首先从事件流谈起

通常支持事件冒泡(Event Bubbling)的事件类型为鼠标事件和键盘事件,例如:mouseover, mouseout, click, keydown, keypress

接口事件则通常不支持事件冒泡(Event Bubbling),例如:load, change, submit, focus, blur

focus/blur 在IE下是不持冒泡的,但是focusin/focusouts是支持冒泡了,可是火狐又不支持这2个事件

 

那么就好办了,focus/blur事件如果需要委托就换成focusin/focusouts代替,但是如果换成不支持focusin/focusouts的浏览器呢,比如火狐

事件流不是还有一个捕获吗?除了IE,现在流行的标准浏览器均支持

所以jQuery给出的最终解决方案是:

如果是IE下面,因为支持 focusin 和 focusout 事件,如果用了focus/blur实现冒泡的话就可以强制换成focusin 和 focusout

其余浏览器在不支持focusin/focusouts的情况下,转化成事件捕获

时间: 2024-08-08 13:54:03

浏览器的聚焦的相关文章

h5 CSS RESET

/*! normalize.css v2.0.1 | MIT License | [git][4].io/normalize */       /* ==========================================================================        HTML5 display definitions        ============================================================

前端编程提高之旅(十五)----jquery事件

HTML与js交互主要通过用户与浏览器操作页面时引发事件.文档或某些元素发生某些变化或操作时,浏览器会生成事件.jquery增加了事件处理能力.    jquery事件部分可以从以下五部分理解:    一.加载DOM函数    这里指的如下方法: $(document).ready(function(){ }) 相比于传统的window.onload方法,前者在执行时机与可否多次使用上区别于后者.    前者是在DOM完全就绪回调就会被调用,后者则是网页所有元素(包含关联文件)完全加载到浏览器后

jQuery-3.事件篇---自定义事件

jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在jQuery通过on方法绑定一个原生事件 $('#elem').on('click', function() { alert("触发系统事件") }); alert需要执行的条件:必须有用户点击才可以.如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是jQuery解

trigger 和 triggerHandler(),自定义事件

1 trigger 和 triggerHandler(),自定义事件 2 语法: 3 $(selector).trigger(event,[param1,param2,...]) 4 1,event 必需.规定指定元素要触发的事件. 5 2,[param1,param2,...] 可选.传递到事件处理程序的额外参数. 6 7 额外的参数对自定义事件特别有用. 8 可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件. 9 ======================== 10 t

MAC_BOOKPRO苹果电脑系统常用快捷键大全

Mac 键盘快捷键 您可以按下某些组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,请按住一个或多个修饰键,然后按快捷键的最后一个键.例如,要使用 Command-C(拷贝),请按住 Command 键并按 C 键,然后同时松开这两个键.Mac 菜单和键盘通常对某些按键使用符号,其中包括以下修饰键: Command(或 Cmd)? Shift ? Option(或 Alt)? Control(或 Ctrl)? Caps Lock ? Fn 在 Windows PC

网页版微信有新消息时浏览器标签有提醒图标,当聚焦到该浏览器标签时,提醒图标消失的 原理

$(window).on('focus', function() { alert(1); });

UC如被百度控股,手机qq浏览器改如何进攻和防守

很早以前在公司内部论坛里写的一篇文章,绯闻已经过过去了,现在已物事人物,UC已有阿里大靠山了. ----------------------------------------------- 据网络媒体的消息,UC被百度以4亿美金控股49%.UC作为塞班时代就作为手机qq浏览器的老牌对手,就像战国时代的秦国和魏国一直在竞争中. 在互联网的是世界里,用户就是土地,拥有了土地,才能种粮食,才能衣食无忧.没有了土地,就没有了一切,哪怕你产品再好,没有土地,就是一无所有. google在中国就是一例,g

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

jQuery封装placeholder效果,让低版本浏览器支持该效果

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支