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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
Bootstrap插件全集
2016/07/18 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python正则分组的应用
2013/11/10 Python
Python实现LRU算法的2种方法
2015/06/24 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
python温度转换华氏温度实现代码
2020/12/06 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
办公室文员工作职责
2014/01/31 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
超强台风观后感
2015/06/09 职场文书
格林童话读书笔记
2015/06/30 职场文书
多表查询、事务、DCL
2021/04/05 MySQL