jquery trigger函数执行两次的解决方法


Posted in Javascript onFebruary 29, 2016

本文实例讲述了jquery trigger函数执行两次的解决方法。分享给大家供大家参考,具体如下:

一、问题如下:

有如下代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}    
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('#old').bind("click", function(){
        $("input").trigger("focus");
    });
    $('#new').bind("click", function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
  $("body").append("<p>focus.</p>");
})
});
</script>
</head>
<body>
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
</body>
</html>

这里的函数:

$('#old').bind("click", function(){
$("input").trigger("focus");
});

在火狐只触发一次,即输出一个focus;

但是在ie触发了两次,即同时输出了两个focus;

二、解决方法:

首先分析一下trigger和triggerHandler。使用triggerHandler不会触发浏览器的默认事件,不会产生事件冒泡(其他区别看jQuery文档)。关于这个bug的 ticket。关于这个问题的 commit。jQuery自己实现了一个event对象用于解决浏览器间的差异问题。可是由于有mouseenter/mouseleave等非标准事件的存在,jQuery引入了special事件的子系统,让原生事件回到模拟事件的事件列队中,可是这个系统并不能解决所有问题,当使用trigger.focus时,IE下会错误地执行两次回调。

triggerHandler是对trigger产生这种问题的解决方法。但是使用triggerHandler时你会发现input是没有光标focus效果的。

jquery trigger函数执行两次的解决方法

初步解决方法:

除了用triggerHandler另一个方法是在focus绑定事件中加上:

event.preventDefault()

可是你发现这不符合我们的期望呀,因为focus事件回调执行了,但是连个focus效果都没有。

最终解决方法:

既然是jQuery封装的关系,那我们用原生的事件就可以了。看演示,左边是用原生事件触发的,右边用triggerHandler。

$('input')[0].focus();

jquery trigger函数执行两次的解决方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
js控制table合并具体实现
Feb 20 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
理解js回收机制通俗易懂版
Feb 29 #Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
jQuery取消特定的click事件
Feb 29 #Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
JS三级可折叠菜单实现方法
Feb 29 #Javascript
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
删除节点的jquery代码
2014/01/13 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
js分页工具实例
2015/01/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
Vue.js用法详解
2017/11/13 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python取余运算符知识点详解
2019/06/27 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python新手学习标准库模块命名
2020/05/29 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
自荐信格式简述
2014/01/25 职场文书
求职简历自我评价范例
2014/03/12 职场文书
父母对孩子说的话
2014/04/12 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python