Solution to jquery trigger function being executed twice

Solution to jquery trigger function being executed twice_jquery

WBOY

Release： 2016-05-16 15:13:06

Original

1966 people have browsed it

The example in this article describes the solution to the problem of executing the jquery trigger function twice. Share it with everyone for your reference, the details are as follows:

1. The questions are as follows:

has the following code:

<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>

Copy after login

Function here:

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

Copy after login

Only triggered once in Firefox, that is, a focus is output;

But it is triggered twice in IE, that is, two focuses are output at the same time;

2. Solution:

First analyze trigger and triggerHandler. Using triggerHandler will not trigger the browser's default event and will not cause event bubbling (see the jQuery documentation for other differences). A ticket about this bug. commit on this issue. jQuery itself implements an event object to resolve differences between browsers. However, due to the existence of non-standard events such as mouseenter/mouseleave, jQuery has introduced a special event subsystem to allow native events to return to the event queue of simulated events. However, this system cannot solve all problems. When using trigger.focus, Under IE, the callback will be executed twice incorrectly.

triggerHandler is a solution to this problem with triggers. But when using triggerHandler, you will find that input has no cursor focus effect.

Initial solution:

In addition to using triggerHandler, another method is to add:

to the focus binding event

event.preventDefault()

Copy after login

But you find that this does not meet our expectations, because the focus event callback is executed, but there is no focus effect.

Final solution:

Since it is encapsulated by jQuery, we can just use native events. Looking at the demo, the left side is triggered by native events, and the right side uses triggerHandler.