Dalam pekerjaan pengembangan front-end, karena kompatibilitas browser dan masalah lainnya, kami sering menggunakan "Stop Event Bubbles" dan "Block Browser Default Behavior".
1. Blokir perilaku default browser
fungsi stopDefault (e) {// Jika objek acara disediakan, ini adalah browser non-IF (e && e.preventDefault) {// blok action browser default (w3c) e.preventDefault (); } else {// Cara memblokir tindakan default fungsi di window.event.ReturnValue = false; } return false; }2. Hentikan gelembung acara
function stopBubble (e) {// Jika objek acara disediakan, ini adalah browser non -e if (e && e.stoppropagation) {// sehingga mendukung metode stoppropagation () w3c e.stoppropagation (); } else {// Sebaliknya, kita perlu menggunakan IE untuk membatalkan Window Bubbles Event.event.cancelBubble = true; } return false; }Contoh aplikasi spesifik: Proyek yang ditulis diserahkan kepada pengguna untuk digunakan hari ini, dan banyak pertanyaan dikembalikan, salah satunya sangat klasik:
Ada formulir di halaman. Tombol yang digunakan untuk mengirimkan formulir adalah tombol. Gunakan jQuery untuk menanggapi klik tombol ini. Kirimkan melalui pos. Pengguna memasukkan kotak teks. Setelah pengguna memasukkan benda untuk diisi, tekan tombol Enter secara langsung, yang setara dengan menekan tombol. Pada awalnya, saya tidak memperhatikan masalah ini. Setelah saya menekan enter, saya melompat ke halaman lain. Setelah memeriksa banyak informasi, saya menemukan bahwa saya ingin memblokir perilaku default browser, karena perilaku default pengiriman adalah untuk mengirimkan formulir, dan kemudian JS Anda tidak akan dieksekusi. Jadi pertama -tama membatalkan perilaku default. Kemudian jalankan JQ Anda untuk mengirimkan. Saya tidak bisa menjelaskan detail spesifiknya. Saya hanya tahu bahwa jika type = "kirim" di kotak teks secara langsung diklik pada tombol, itu akan melompat ke halaman lain. Jika type = "tombol", ini tidak akan terjadi saat mengklik tombol. Anda dapat menekan ENTER untuk melompat ke halaman lain. Solusinya adalah:
<input type = "text" name = "appgrpname_s" id = "appgrpname_s" onkeydown = "enter_down (this.form, event);"/>
<script type = "text/javascript"> function enter_down (form, event) {if (event.keycode == "13") {stopDefault (event); SubMitform (form, 'ActionDiv'); }} Fungsi stopDefault (e) {// Jika objek acara disediakan, ini adalah browser non -e if (e && e.preventDefault) {// blokir tindakan browser default (w3c) e.preventDefault (); } else {// Cara memblokir tindakan default fungsi di window.event.ReturnValue = false; } return false; } </script>Melalui kode di atas, Anda dapat menyadari bahwa ketika menekan enter, itu setara dengan mengklik tombol "Kirim". Dan kode di atas kompatibel dengan browser IE dan FF.
Kadang -kadang ketika Anda menemukan beberapa perilaku kunci pintasan yang perlu memblokir browser, seperti: menekan tombol backspace di bawah FF akan melompat ke halaman sejarah browser sebelumnya;
Perhatikan bahwa Anda perlu memanggil fungsi StopDefault (acara) di acara OnKeydown, dan panggilan di acara OnKeyup tidak berhasil.
<span style = "warna: rgb (51, 153, 51);"> </</span> Onclick <span style = "Color: rGB (51, 153, 51);"> = </span> <span style = "warna: rgb (51, 153, 51);" >>> </span> span = "rgb (51, 153, 51);" >>> </span> span = "RGB (51, 153, 51);" >>> </span> </span = "RGB (51, 153, 51);" >>> </span> span = span = "ran =" 51); ">>> </span> A <span style =" Color: rgb (51, 153, 51); ">> </</span> A <span style =" Color: RGB (51, 153, 51); ">> </span>
Karena HREF adalah nilai nol, jika perilaku default browser tidak diblokir, efeknya adalah untuk menyegarkan halaman.
Sekarang yang perlu kita lakukan adalah memblokir acara tautan HREF dan menjalankan acara OnClick.
Cara penanganan lama:
<span style = "warna: rgb (51, 153, 51);"> <</span> onklick <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 102, 204);"> "togglefunfunfunclist (event, event, event, event, event, event, event, '" href <span style = "warna: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 102, 204);"> ">" togglefunfunfunclist (event event, '67,' 67); " href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 204); ">" APOLAK: 51, "/</span> </span> <span style =" Color: RGB (51, 51, "51; RGB (51, 153, 51); ">> </span>
Cara Menulis JQuery:
1) Return False: Di Event Handler, mencegah perilaku default dan gelembung peristiwa.
Kembalikan false dalam pemrosesan peristiwa, peristiwa default dan peristiwa menggelegak dapat diblokir.
2) event.preventDefault (): Di event handler, cegah acara default (memungkinkan bubblering).
event.preventdefault () dapat mencegah peristiwa default tetapi memungkinkan terjadinya peristiwa gelembung.
3) event.stoppropagation (): Di event handler, cegah gelembung (memungkinkan perilaku default).
event.stoppropagation () dapat mencegah gelembung tetapi memungkinkan terjadinya peristiwa default.
Cara Menulis Prototipe:
Event.stop (acara)
PENDAHULUAN PENGGUNA:
Setelah suatu peristiwa terjadi, browser biasanya pertama -tama memicu event handler pada elemen kejadian peristiwa, kemudian elemen induknya, elemen induk dari elemen induk ... dan seterusnya sampai elemen root dokumen. Ini disebut gelembung acara dan merupakan cara yang paling umum terjadi. Setelah suatu acara diproses, Anda mungkin ingin menghentikan penyebaran acara dan tidak ingin itu terus menggelembung.
Ketika program Anda memiliki kesempatan untuk memproses suatu acara, jika acara tersebut memiliki perilaku default, browser juga akan memprosesnya. Misalnya, klik tautan navigasi, kirimkan formulir ke server, tekan Enter di kotak teks satu baris, dan sebagainya. Jika Anda mendefinisikan cara Anda sendiri untuk menangani acara ini, Anda mungkin sangat bersedia untuk memblokir perilaku default yang relevan.
Namun, terkadang masalah yang sesuai tidak dapat diselesaikan. Meskipun metode untuk memblokir perilaku default browser telah dipanggil, perilaku default masih akan dipanggil saat menekan Enter. Pada akhirnya, masalahnya tidak ditemukan, jadi saya harus menonaktifkan kunci Enter. Bahkan, kunci tab digunakan sebagai pengganti kunci enter. Kodenya adalah sebagai berikut:
<skrip bahasa = "javascript" event = "onkeydown" untuk = "document"> // Jika itu adalah tombol enter if (event.keycode == 13) {// Ubah ke tombol tab, sehingga setiap kali Anda menekan enter, efek tab, kursor melompat ke objek objek berikutnya.keyCode = 9; } </script> <bahasa skrip = "javaScript" type = "text/javascript"> // Nonaktifkan formulir Kunci Enter untuk secara otomatis mengirimkan Document.onKeyDown = function (event) {var target, kode, tag; if (! event) {event = window.event; // untuk IE browser target = event.srcelement; kode = event.keycode; if (code == 13) {tag = target.tagname; if (tag == "textarea") {return true; } else {return false; }}} else {target = event.target; // Untuk browser yang mengikuti standar W3C, seperti Firefox Code = Event.KeyCode; if (code == 13) {tag = target.tagname; if (tag == "input") {return false; } else {return true; }}}}}; </script>Contoh Penggunaan Spesifik:
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <%@ page language = "java" import = "java.util.*" PageEncoding = "UTF-8"%> <%@ include = "/halaman/common/common.jsp"%> <%hum/head <%head = "/halaman/common/common.jsp"%> <%hum <%hum <%hum <%head = "/halaman/halaman/global.jsp" tito <%> <%@ head = " http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "Expires" content = "0"> <meta http-equiv = "content-type" content = "text/html; html; htset/charset =" content-type "content =" text/html; html; html; charset = "content-type" content = "text/html; html; html; charset =" content-type "content =" Text/html; html; htset/charset = "content-type" content = "text/html; HTML; gotopage (currentpage, form) {goto_page (currentpage, form, "actionDiv"); } function addappgrp () {$ ("#actionDiv"). Load ("$ {ContextPath} /pages/Manage/Business/Add.jsp"); $ ("#peluang_search_div"). Hide (); } function ModifyapPgrp (IDName) {var id = encodeuricomponent (IDName); var url = contextName + "/Appgrpaction.do?method=addappgrp&appgrpname="+id; retrieveurl (url, 'actionDiv'); $ ("#peluang_search_div"). Hide (); } function saveBusiness (thisForm) {var name = $ ("#appgrpname"). val (); if (name.trim () == "") {alert ("Nama grup tidak dapat kosong."); kembali; } kirimForm (thisform, null, aftersave); kembali ; } function aftersave (konten) {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {$ ("#chance_search_div"). show (); // Node saat ini var itemId = "0 ::" + $ ("#appgrpname"). Val (); // presid node, karena metode ini hanya dieksekusi saat menambahkan grup aplikasi root, simpul induknya secara seragam -1 var parentid = -1; // Node Node saat ini nama var itemText = $ ("#appgrpname"). Val (); // Tambahkan pohon simpul baru.insertNewChild (ParentId, itemId, itemText, doonClick, 'myfolderclosed.gif', 'myfolderopen.gif', 'myfolderclosed.gif'); retrieveUrl ("$ {ContextPath} /appgrpaction.do?method=appgrplist", "ActionDiv"); kembali; } peringatan (arr [1]); kembali; } peringatan ("Simpan Gagal"); kembali; } function deleteBusiness (thisForm, idName) {if (konfirmasi ("apakah Anda ingin menghapus?")) {var id = encodeuricomponent (idName); retrieveUrl ("$ {ContextPath} /Appgrpaction.do?method=deleteAppgrp&appgrpname=" + id, null, null, function (konten) {if (konten! = null && content! = "") {var arr = content.split (""); if (if (arr.length = ") {var arr = content.split (" aplikasi di bawah grup aplikasi ini. node itemid = 0 :: "IDNAME; kembali ; }} function afterforceDel () {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {monitortree (); retrieveUrl ("$ {ContextPath} /appgrpaction.do?method=appgrplist", "ActionDiv"); kembali; } peringatan (arr [1]); kembali; } peringatan ("Simpan Gagal"); kembali; } function enter_down (form, event) {if (event.keycode == "13") {stopDefault (event); SubMitform (form, 'ActionDiv'); }} Fungsi stopDefault (e) {// Jika objek acara disediakan, maka ini adalah browser non -e if (e && e.preventDefault) {// blokir tindakan browser default (w3c) e.preventDefault (); } else {// Cara memblokir tindakan default fungsi di window.event.ReturnValue = false; } return false; } </script> </head> <body> <able> <tr> <td style = "text-align: left;"> <div id = "peluang_search_div"> <html: formulir action = "appgrpaction.do?method=appgrist" <Table> <Tr> <t> query <input type = "hidden" "hidden "s" <tr> <td style = "text-align: left; padding-left: 50px;"> <br /> name <input type = "text" name = "appgrpname_s" id = "appgrpname_s" onblur = "javascript: isspecialchar (this);" OnkeyDown = "enter_down (this.Form, event);"/> <input type = "tombol" value = "kueri" ontClick = "JavaScript: kirimForm (this.Form, 'actionDiv');" /> <input type = "tombol" value = "add" onclick = "javaScript: addappgrp ();"/> <br/> </td> </tr> </able> </tml: formulir> </div> <div id = "actionDiv"> </div> </td> </tr> </tabel> </Action> <! " } /appgrpaction.do?method=appgrplist&random= " + math.random ()); -> </script> </body> </html>Kode di atas untuk mencegah perilaku browser default dan perilaku menggelegak JS adalah semua konten yang saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.