ในงานพัฒนาส่วนหน้าเนื่องจากความเข้ากันได้ของเบราว์เซอร์และปัญหาอื่น ๆ เรามักจะใช้ "Stop Event Bubbles" และ "บล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์"
1. บล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์
ฟังก์ชั่น stopdefault (e) {// ถ้ามีการจัดเตรียมวัตถุเหตุการณ์นี่คือเบราว์เซอร์ที่ไม่ใช่ IE ถ้า (e && e.preventDefault) {// บล็อกการกระทำเริ่มต้นของเบราว์เซอร์ (W3C) E.PreventDefault (); } else {// วิธีบล็อกการกระทำเริ่มต้นของฟังก์ชั่นใน window.event.returnvalue = false; } return false; -2. หยุดการเดือดร้อนของเหตุการณ์
ฟังก์ชั่น StopBubble (E) {// ถ้ามีวัตถุเหตุการณ์นี้เป็นเบราว์เซอร์ที่ไม่ใช่ IE ถ้า (E && E.STOPPROPAGATION) {// ดังนั้นจึงรองรับเมธอด stoppropagation () ของ W3C () E.StopPropagation (); } else {// มิฉะนั้นเราต้องใช้ IE เพื่อยกเลิก Event Bubbles Window.event.cancelBubble = true; } return false; -ตัวอย่างแอปพลิเคชันเฉพาะ: โครงการที่เขียนถูกส่งมอบให้กับผู้ใช้เพื่อใช้ในวันนี้และมีคำถามมากมายที่ถูกส่งคืนซึ่งหนึ่งในนั้นคลาสสิกมาก:
มีแบบฟอร์มในหน้า ปุ่มที่ใช้ในการส่งแบบฟอร์มเป็นปุ่ม ใช้ jQuery เพื่อตอบสนองต่อการคลิกปุ่มนี้ ส่งผ่านโพสต์ ผู้ใช้ป้อนกล่องข้อความ หลังจากผู้ใช้เข้าสู่สิ่งที่จะกรอกให้กดปุ่ม Enter โดยตรงซึ่งเทียบเท่ากับการกดปุ่ม ในตอนแรกฉันไม่ได้ใส่ใจกับปัญหานี้ เมื่อฉันกด Enter ฉันก็กระโดดไปที่หน้าอื่น หลังจากตรวจสอบข้อมูลจำนวนมากฉันพบว่าฉันต้องการบล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์เนื่องจากพฤติกรรมเริ่มต้นของการส่งคือการส่งแบบฟอร์มและจากนั้น JS ของคุณจะไม่ถูกดำเนินการ ดังนั้นก่อนที่จะยกเลิกพฤติกรรมเริ่มต้น จากนั้นดำเนินการ JQ ของคุณเพื่อส่ง ฉันไม่สามารถอธิบายรายละเอียดเฉพาะได้ ฉันรู้เพียงว่าถ้า type = "ส่ง" ในกล่องข้อความถูกคลิกที่ปุ่มโดยตรงมันจะข้ามไปยังหน้าอื่น ถ้าปุ่ม = "ปุ่ม" สิ่งนี้จะไม่เกิดขึ้นเมื่อคลิกปุ่ม คุณสามารถกด Enter เพื่อข้ามไปยังหน้าอื่น ทางออกคือ:
<input type = "text" name = "appgrpname_s" id = "appgrpname_s" onkeydown = "enter_down (this.form, event);"/>
<script type = "text/javascript"> ฟังก์ชั่น enter_down (ฟอร์ม, เหตุการณ์) {ถ้า (event.keycode == "13") {stopdefault (เหตุการณ์); SubmitForm (แบบฟอร์ม, 'ActionDiv'); }} ฟังก์ชั่น stopDefault (e) {// ถ้ามีวัตถุเหตุการณ์นี้เป็นเบราว์เซอร์ที่ไม่ใช่ IE ถ้า (e && e.preventDefault) {// บล็อกการกระทำของเบราว์เซอร์เริ่มต้น (W3C) E.PreventDefault (); } else {// วิธีบล็อกการกระทำเริ่มต้นของฟังก์ชั่นใน window.event.returnvalue = false; } return false; } </script>ผ่านรหัสด้านบนคุณสามารถตระหนักได้ว่าเมื่อกด Enter มันเทียบเท่ากับการคลิกปุ่ม "ส่ง" และรหัสข้างต้นเข้ากันได้กับเบราว์เซอร์ IE และ FF
บางครั้งเมื่อคุณพบพฤติกรรมคีย์ทางลัดบางอย่างที่จำเป็นต้องปิดกั้นเบราว์เซอร์เช่น: การกดปุ่ม backspace ภายใต้ FF จะข้ามไปที่หน้าประวัติของเบราว์เซอร์ก่อนหน้า;
โปรดทราบว่าคุณต้องเรียกฟังก์ชั่น StopDefault (เหตุการณ์) ในเหตุการณ์ OnKeydown และการโทรในเหตุการณ์ OnKeyup นั้นไม่ประสบความสำเร็จ
<span style = "สี: rgb (51, 153, 51);"> </</span> a onclick <span style = "สี: rgb (51, 153, 51);"> = </span> <span style = "สี: rgb (51, 153, 51);" >>> 51); ">>> </span> a <span style =" สี: rgb (51, 153, 51); ">> </</span> a <span style =" สี: rgb (51, 153, 51); ">> </span>
เนื่องจาก HREF เป็นค่า NULL หากพฤติกรรมเริ่มต้นของเบราว์เซอร์ไม่ถูกบล็อกเอฟเฟกต์จะรีเฟรชหน้า
ตอนนี้สิ่งที่เราต้องทำคือบล็อกเหตุการณ์ลิงก์ของ HREF และดำเนินการเหตุการณ์ onClick
วิธีการจัดการแบบเก่า:
<span style = "สี: rgb (51, 153, 51);"> <</span> a onclick <span style = "สี: rgb (51, 153, 51);"> = </span> <span style = "สี: rgb (51, 102, 204); href <span style = "สี: rgb (51, 153, 51);"> = </span> <span style = "สี: rgb (51, 153, 51);"> = </span> <span style = "สี: rgb (51, 102, 204);"> ">" href <span style = "สี: rgb (51, 153, 51);"> = </span> <span style = "สี: 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, 202, 202, 202, 202, 202, 204); RGB (51, 153, 51); ">> </span>
วิธีการเขียน jQuery:
1) ส่งคืนเท็จ: ในตัวจัดการเหตุการณ์ป้องกันพฤติกรรมเริ่มต้นและฟองสบู่เหตุการณ์
ส่งคืนเท็จในการประมวลผลเหตุการณ์เหตุการณ์เริ่มต้นและเหตุการณ์เดือดปุด ๆ
2) Event.PreventDefault (): ในตัวจัดการเหตุการณ์ป้องกันเหตุการณ์เริ่มต้น (อนุญาตให้เกิดฟอง)
Event.preventDefault () สามารถป้องกันเหตุการณ์เริ่มต้น แต่อนุญาตให้เกิดเหตุการณ์ฟอง
3) Event.StopPropagation (): ในตัวจัดการเหตุการณ์ป้องกันฟองสบู่ (อนุญาตให้มีพฤติกรรมเริ่มต้น)
Event.stopPropagation () สามารถป้องกันการเดือดปุด ๆ แต่อนุญาตให้เกิดเหตุการณ์เริ่มต้น
วิธีการเขียนต้นแบบ:
Event.STOP (เหตุการณ์)
การแนะนำการใช้งาน:
หลังจากเหตุการณ์เกิดขึ้นเบราว์เซอร์มักจะทริกเกอร์ตัวจัดการเหตุการณ์ในองค์ประกอบเหตุการณ์ที่เกิดขึ้นจากนั้นองค์ประกอบหลักขององค์ประกอบหลักขององค์ประกอบหลัก ... และอื่น ๆ จนกระทั่งองค์ประกอบรูทของเอกสาร สิ่งนี้เรียกว่า Event Bubbles และเป็นเหตุการณ์ที่พบได้บ่อยที่สุด หลังจากประมวลผลเหตุการณ์คุณอาจต้องการหยุดการแพร่กระจายของเหตุการณ์และไม่ต้องการให้มันเป็นฟองต่อไป
เมื่อโปรแกรมของคุณมีโอกาสในการประมวลผลเหตุการณ์หากเหตุการณ์มีพฤติกรรมเริ่มต้นเบราว์เซอร์จะดำเนินการด้วย ตัวอย่างเช่นคลิกที่ลิงค์นำทางส่งแบบฟอร์มไปยังเซิร์ฟเวอร์กด Enter ในกล่องข้อความบรรทัดเดียวและอื่น ๆ หากคุณกำหนดวิธีการจัดการกิจกรรมเหล่านี้คุณอาจเต็มใจที่จะบล็อกพฤติกรรมเริ่มต้นที่เกี่ยวข้อง
อย่างไรก็ตามบางครั้งปัญหาที่เกี่ยวข้องไม่สามารถแก้ไขได้ แม้ว่าวิธีการบล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์ถูกเรียก แต่พฤติกรรมเริ่มต้นจะยังคงถูกเรียกเมื่อกด Enter ในท้ายที่สุดไม่พบปัญหาดังนั้นฉันจึงต้องปิดการใช้งานปุ่ม ENTER อันที่จริงแล้วคีย์แท็บจะถูกใช้แทนคีย์ Enter รหัสมีดังนี้:
<script language = "javascript" event = "onkeydown" สำหรับ = "เอกสาร"> // ถ้าเป็นปุ่มป้อนถ้า (event.keycode == 13) {// เปลี่ยนเป็นปุ่มแท็บดังนั้นทุกครั้งที่คุณกด ENTEL, TAB, เคอร์เซอร์กระโดดไปยังเหตุการณ์วัตถุถัดไป } </script> <script language = "JavaScript" type = "text/javascript"> // ปิดใช้งานฟอร์มป้อนคีย์เพื่อส่ง document.onkeydown = ฟังก์ชั่น (เหตุการณ์) {เป้าหมาย var, รหัส, แท็ก; if (! เหตุการณ์) {event = window.event; // สำหรับ IE BROWSER TARGET = EVENT.SrECEMENT; code = event.keycode; if (code == 13) {tag = target.tagname; if (tag == "textarea") {return true; } else {return false; }}} else {target = event.target; // สำหรับเบราว์เซอร์ที่เป็นไปตามมาตรฐาน W3C เช่น Firefox Code = Event.keycode; if (code == 13) {tag = target.tagname; if (tag == "input") {return false; } else {return true; }}}}}; </script>ตัวอย่างการใช้งานเฉพาะ:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "หมดอายุ" content = "0"> <meta http-equiv = "content-type" gotopage (CurrentPage, แบบฟอร์ม) {goto_page (CurrentPage, แบบฟอร์ม, "ActionDiv"); } ฟังก์ชั่น addappgrp () {$ ("#actiondiv"). load ("$ {contextpath} /pages/manage/business/add.jsp"); $ ("#jiple_search_div"). ซ่อน (); } ฟังก์ชั่น modifyappgrp (idName) {var id = encodeuricomponent (idName); var url = contextName + "/AppGrPaction.do?method=addappgrp&appgrpname="+id; retrieveurl (url, 'actiondiv'); $ ("#jiple_search_div"). ซ่อน (); } ฟังก์ชั่น saveBusiness (thisform) {var name = $ ("#appgrpname"). val (); if (name.trim () == "") {แจ้งเตือน ("ชื่อกลุ่มไม่สามารถว่างเปล่าได้"); กลับ; } submitForm (thisform, null, aftersave); กลับ ; } ฟังก์ชั่น aftersave (เนื้อหา) {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {$ ("#jiple_search_div"). show (); // ปัจจุบันโหนด var itemId = "0 ::" + $ ("#appgrpname"). val (); // presid node เนื่องจากวิธีนี้จะดำเนินการเฉพาะเมื่อเพิ่มกลุ่มแอปพลิเคชันรูทโหนดพาเรนต์นั้นสม่ำเสมอ -1 var parentid = -1; // ชื่อการแสดงโหนดปัจจุบันชื่อ var itemText = $ ("#appGrpName"). val (); // เพิ่ม Node Tree.InsertNewChild (parentid, itemid, itemtext, doonclick, 'myfolderclosed.gif', 'myfolderopen.gif', 'myfolderclosed.gif'); retrieveurl ("$ {contextPath} /AppGrPaction.do?method=appglist", "ActionDiv"); กลับ; } การแจ้งเตือน (arr [1]); กลับ; } การแจ้งเตือน ("บันทึกล้มเหลว"); กลับ; } ฟังก์ชั่น deleetebusiness (thisform, idName) {ถ้า (ยืนยัน ("คุณต้องการลบหรือไม่")) {var id = encodeuricomponent (idName); retrieveurl ("$ {contextPath} /AppGrPaction.do?method=DeleTeAppgrp&appgrpname=" + id, null, null, ฟังก์ชั่น (เนื้อหา) {ถ้า (เนื้อหา! = null && เนื้อหา! = "") {var arr = content.split ภายใต้กลุ่มแอปพลิเคชันนี้ itemId = "0 ::" idname; กลับ ; }} ฟังก์ชั่น afterforcedel () {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {monitortree (); retrieveurl ("$ {contextPath} /AppGrPaction.do?method=appglist", "ActionDiv"); กลับ; } การแจ้งเตือน (arr [1]); กลับ; } การแจ้งเตือน ("บันทึกล้มเหลว"); กลับ; } ฟังก์ชั่น enter_down (ฟอร์ม, เหตุการณ์) {ถ้า (event.keycode == "13") {stopDefault (เหตุการณ์); SubmitForm (แบบฟอร์ม, 'ActionDiv'); }} ฟังก์ชั่น stopDefault (e) {// ถ้ามีวัตถุเหตุการณ์นั้นให้ไว้นี่คือเบราว์เซอร์ที่ไม่ใช่ IE ถ้า (e && e.preventDefault) {// บล็อกการกระทำของเบราว์เซอร์เริ่มต้น (W3C) E.PreventDefault (); } else {// วิธีบล็อกการกระทำเริ่มต้นของฟังก์ชั่นใน window.event.returnvalue = false; } return false; } </script> </head> <body> <body> <table> <tr> <td style = "text-allign: left;"> <div id = "ipsearch_search_div"> <html: form action = "appgrpaction.do?method=appgList"> <table> <tr> <tr> <td style = "text-allign: left; padding-left: 50px;"> <br /> name <input type = "text" name = "appgrpname_s" id = "appgrpname_s" onblur = "javascript: isspecialchar (นี่);" onkeydown = "enter_down (this.form, event);"/> <input type = "button" value = "Query" onClick = "JavaScript: submitForm (this.form, 'ActionDiv');" /> <อินพุต type = "button" value = "เพิ่ม" onclick = "JavaScript: addappgrp ();"/> <br/> </td> </tr> </tble> </tml: form> </div> <div id = "actionDiv"> </div> </td> </tr> } /AppGrpaction.do?method=appglist&random= " + math.random ()); -> </script> </body> </html>รหัสข้างต้นเพื่อป้องกันพฤติกรรมเบราว์เซอร์เริ่มต้นและพฤติกรรมการเดือดดาลของ JS เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น