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 相关文章推荐
js onclick事件传参讲解
Nov 06 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
python实现挑选出来100以内的质数
2015/03/24 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Django forms组件的使用教程
2018/10/08 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
学生宿舍管理制度
2014/01/30 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL