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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
理解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中mysql模块部分功能的简单封装
2011/09/30 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
5.1手机促销活动
2014/01/17 职场文书
初中美术教学反思
2014/01/29 职场文书
入学申请自荐信范文
2014/02/26 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
保护黄河倡议书
2014/05/16 职场文书
财务会计专业自荐书
2014/06/30 职场文书
支部书记四风对照材料
2014/08/28 职场文书
初中差生评语
2014/12/29 职场文书
大学教师个人总结
2015/02/10 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
电工实训心得体会
2016/01/14 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
html5表单的required属性使用
2021/07/07 HTML / CSS