Rumah > Artikel > hujung hadapan web > Penyelesaian kepada fungsi pencetus jquery sedang dilaksanakan twice_jquery

Penyelesaian kepada fungsi pencetus jquery sedang dilaksanakan twice_jquery

WBOYasal: 2016-05-16 15:13:061920semak imbas

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>

Fungsi di sini:

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

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

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.

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

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "ringkasan kesan khas klasik biasa JQuery", "animasi jQuery dan ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "jQuery pemalam biasa dan ringkasan penggunaan》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：10 pemalam Teks Sublime mesti ada untuk kemahiran JavaScript developers_javascriptArtikel seterusnya：10 pemalam Teks Sublime mesti ada untuk kemahiran JavaScript developers_javascript

Artikel berkaitan

Lihat lagi