Penyelesaian kepada fungsi pencetus jquery sedang dilaksanakan twice

Penyelesaian kepada fungsi pencetus jquery sedang dilaksanakan twice_jquery

WBOY

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

asal

1915 orang telah melayarinya

Contoh dalam artikel ini menerangkan penyelesaian kepada masalah melaksanakan fungsi pencetus jquery dua kali. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Soalan-soalannya adalah seperti berikut:

mempunyai kod berikut:

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

Salin selepas log masuk

Fungsi di sini:

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

Salin selepas log masuk

Hanya dicetuskan sekali dalam Firefox, iaitu fokus ialah keluaran

Tetapi ia dicetuskan dua kali dalam IE, iaitu, dua fokus dikeluarkan pada masa yang sama

2. Penyelesaian:

Analisis dahulu pencetus dan pencetusHandler. Menggunakan triggerHandler tidak akan mencetuskan acara lalai penyemak imbas dan tidak akan menyebabkan acara menggelegak (lihat dokumentasi jQuery untuk perbezaan lain). Tiket tentang pepijat ini. komited dalam isu ini. jQuery sendiri melaksanakan objek acara untuk menyelesaikan perbezaan antara pelayar. Walau bagaimanapun, disebabkan kewujudan acara bukan piawai seperti mouseenter/mouseleave, jQuery telah memperkenalkan subsistem acara khas untuk membolehkan acara asli kembali ke baris gilir acara acara simulasi Walau bagaimanapun, sistem ini tidak dapat menyelesaikan semua masalah apabila menggunakan pencetus .focus, Di bawah IE, panggilan balik akan dilaksanakan dua kali secara tidak betul.

triggerHandler ialah penyelesaian kepada masalah ini dengan pencetus. Tetapi apabila menggunakan triggerHandler, anda akan mendapati bahawa input tidak mempunyai kesan fokus kursor.

Penyelesaian awal:

Selain menggunakan triggerHandler, kaedah lain ialah menambah:

pada acara mengikat fokus

event.preventDefault()

Salin selepas log masuk

Tetapi anda mendapati bahawa ini tidak memenuhi jangkaan kami, kerana panggilan balik acara fokus dilaksanakan, tetapi tiada kesan fokus.

Penyelesaian terakhir:

Memandangkan ia dirangkumkan oleh jQuery, kami hanya boleh menggunakan acara asli. Melihat demo, bahagian kiri dicetuskan oleh peristiwa asli, dan bahagian kanan menggunakan triggerHandler.