Home > Article > Web Front-end > Solution to jquery trigger function being executed twice_jquery

Solution to jquery trigger function being executed twice_jquery

WBOYOriginal: 2016-05-16 15:13:061942browse

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>

Function here:

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

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

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.

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

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and skills summary", "jQuery extension skills summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：10 must-have Sublime Text plug-ins for JavaScript developers_javascript skillsNext article：10 must-have Sublime Text plug-ins for JavaScript developers_javascript skills

See more

Solution to jquery trigger function being executed twice_jquery

Related articles