في العمل التنموي في الواجهة الأمامية ، بسبب توافق المتصفح وغيرها من القضايا ، غالبًا ما نستخدم "إيقاف فقاعات الأحداث" و "Block Browser Default".
1. منع السلوك الافتراضي للمتصفح
Function StopDefault (e) {// إذا تم توفير كائن حدث ، فهذا عبارة عن متصفح غير IE إذا (e && e.preventDefault) {// block action browser action (w3c) e.preventDefault () ؛ } آخر {// كيفية حظر الإجراء الافتراضي للوظيفة في ie window.event.ReturnValue = false ؛ } إرجاع خطأ ؛ }2. توقف عن فقاعات الأحداث
Function StopBubble (e) {// إذا تم توفير كائن حدث ، فهذا عبارة عن متصفح غير IE إذا (e && e.StopPropagation) {// لذلك يدعم طريقة توقف W3C () E.StopPropagation () ؛ } آخر {// خلاف ذلك ، نحتاج إلى استخدام IE لإلغاء Window.event.cancelBubble = true ؛ } إرجاع خطأ ؛ }مثال على تطبيق محدد: تم تسليم مشروع مكتوب إلى المستخدم لاستخدامه اليوم ، وتم إرجاع الكثير من الأسئلة ، وكان أحدها كلاسيكيًا للغاية:
هناك نموذج على الصفحة. الزر المستخدم لإرسال النموذج هو زر. استخدم jQuery للرد على النقر على هذا الزر. أرسله من خلال المنشور. يقوم المستخدم بإدخال مربع نص. بعد إدخال المستخدم إلى الشيء الذي يجب ملؤه ، اضغط على مفتاح Enter مباشرة ، وهو ما يعادل الضغط على الزر. في البداية ، لم أهتم بهذه المشكلة. بمجرد الضغط على Enter ، قفزت إلى صفحة أخرى. بعد التحقق من الكثير من المعلومات ، وجدت أنني أردت حظر السلوك الافتراضي للمتصفح ، لأن السلوك الافتراضي للإرسال هو إرسال النموذج ، ثم لن يتم تنفيذ JS الخاص بك. لذا أولاً قم بإلغاء السلوك الافتراضي. ثم قم بتنفيذ JQ لتقديمها. لا أستطيع شرح التفاصيل المحددة. أعرف فقط أنه إذا تم النقر مباشرة على type = "إرسال" في مربع النص على الزر ، فسيقفز إلى صفحة أخرى. إذا كان النوع = "زر" ، فلن يحدث هذا عند النقر فوق الزر. يمكنك الضغط على الإدخال للقفز إلى صفحة أخرى. الحل هو:
<type type = "text" name = "appgrpname_s" id = "appgrpname_s" onKeyDown = "Enter_Down (this.form ، event) ؛"/>
<script type = "text/javaScript"> function inter_down (النموذج ، الحدث) {if (event.keycode == "13") {stopDefault (event) ؛ إرسال (نموذج ، "ActionDiv") ؛ }} function stopDefault (e) {// إذا تم توفير كائن حدث ، فهذا عبارة عن متصفح غير ie إذا (e && e.preventDefault) {// قم بحظر إجراء المستعرض الافتراضي (W3C) E.PreventDefault () ؛ } آخر {// كيفية حظر الإجراء الافتراضي للوظيفة في ie window.event.ReturnValue = false ؛ } إرجاع خطأ ؛ } </script>من خلال الكود أعلاه ، يمكنك إدراك أنه عند الضغط على Enter ، فإنه يعادل النقر فوق الزر "إرسال". والرمز أعلاه متوافق مع متصفحات IE و FF.
في بعض الأحيان ، عندما تواجه بعض السلوكيات الرئيسية المختصرة التي تحتاج إلى منع المتصفح ، مثل: سيؤدي الضغط على مفتاح Space Backspace تحت صفحة التاريخ إلى المتصفح السابق ؛
لاحظ أنك تحتاج إلى استدعاء وظيفة StopDefault (الحدث) في حدث OnKeyDown ، وأن المكالمة في حدث OnKeyup غير ناجح.
<span style = "color: rgb (51 ، 153 ، 51) ؛"> </vans> a onclick <span style = "color: rgb (51 ، 153 ، 51) ؛"> = </span> <span style = "color: rgb (51 ، 153 ، 51) ؛ 51) ؛ ">>> </span> a <span style =" color: rgb (51 ، 153 ، 51) ؛ ">> </span> a <span style =" color: rgb (51 ، 153 ، 51) ؛ ">> </span>
نظرًا لأن HREF عبارة عن قيمة خالية ، إذا لم يتم حظر السلوك الافتراضي للمتصفح ، فسيكون التأثير هو تحديث الصفحة.
الآن كل ما نحتاج إلى فعله هو منع حدث رابط HREF وتنفيذ حدث OnClick.
الطريقة القديمة للتعامل:
<span style = "color: rgb (51 ، 153 ، 51) ؛"> <</span> a onclick <span style = "color: rgb (51 ، 153 ، 51) ؛"> = </span> <span style = "color: rgb (51 ، 102 ، 204) ؛ href <span style = "color: rgb (51 ، 153 ، 51) ؛"> = </span> <span style = "color: rgb (51 ، 153 ، 51) ؛ 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 ، 202 ، 202 ، 202 ، 202 ، 202 ، 202 ، 202 ، 204) ؛ RGB (51 ، 153 ، 51) ؛ ">> </span>
كيف تكتب jQuery:
1) إرجاع خطأ: في معالج الأحداث ، يمنع السلوك الافتراضي وفقاعة الأحداث.
إرجاع خطأ في معالجة الأحداث والأحداث الافتراضية والأحداث الفقاعية يمكن حظرها.
2) Event.PreventDefault (): في معالج الأحداث ، منع الحدث الافتراضي (يسمح bubblering).
Event.PreventDefault () يمكن أن يمنع الحدث الافتراضي ولكن السماح بحدوث أحداث الفقاعة.
3) Event.StopPropagation (): في معالج الأحداث ، منع الفقاعة (يسمح السلوك الافتراضي).
Event.StopPropagation () يمكن أن يمنع الفقاعات ولكن السماح بحدوث الأحداث الافتراضية.
كيف تكتب النموذج الأولي:
event.stop (حدث)
مقدمة الاستخدام:
بعد حدوث حدث ما ، عادةً ما يؤدي المتصفح أولاً إلى تشغيل معالج الحدث على عنصر حدوث الحدث ، ثم العنصر الأصل ، والعنصر الأصل للعنصر الأصل ... وما إلى ذلك حتى عنصر جذر المستند. وهذا ما يسمى فقاعات الأحداث وهو أكثر الأحداث شيوعًا. بعد معالجة الحدث ، قد ترغب في إيقاف انتشار الحدث ولا تريد أن تستمر في الاستمرار.
عندما تتاح لبرنامجك الفرصة لمعالجة حدث ما ، إذا كان للحدث سلوكًا افتراضيًا ، فسيقوم المتصفح بمعالجةه أيضًا. على سبيل المثال ، انقر فوق رابط التنقل ، وأرسل النموذج إلى الخادم ، واضغط على Enter في مربع نص سطر واحد ، وما إلى ذلك. إذا حددت طريقتك الخاصة للتعامل مع هذه الأحداث ، فقد تكون على استعداد للغاية لحظر السلوك الافتراضي ذي الصلة.
ومع ذلك ، في بعض الأحيان لا يمكن حل المشكلة المقابلة. على الرغم من أن طريقة حظر السلوك الافتراضي للمستعرض قد تم استدعاؤها ، إلا أنه سيظل السلوك الافتراضي هو ما زال يتم استدعاء السلوك الافتراضي عند الضغط على Enter. في النهاية ، لم يتم العثور على المشكلة ، لذلك اضطررت إلى تعطيل مفتاح Enter. في الواقع ، يتم استخدام مفتاح TAB بدلاً من مفتاح Enter. الرمز كما يلي:
<script language = "javaScript" event = "onKeyDown" for = "document"> // إذا كان مفتاح الإدخال if (event.keycode == 13) {// قم بتغييره إلى مفتاح علامة التبويب ، بحيث في كل مرة تضغط فيها ، فإن تأثير علامة التبويب ، يقفز المؤشر إلى Event.KeyCode = 9 ؛ } </script> <script language = "javaScript" type = "text/javaScript"> // تعطيل نموذج المفتاح الإدخال لإرسال document.onkeydown = function (event) {var target ، code ، tag ؛ if (! event) {event = window.event ؛ // لـ IE Browser Target = event.srcelement ؛ الكود = Event.KeyCode ؛ if (code == 13) {tag = target.tagname ؛ if (tag == "textarea") {return true ؛ } آخر {return false ؛ }}} آخر {target = event.target ؛ // للمتصفحات التي تتبع معيار W3C ، مثل رمز Firefox = event.keycode ؛ if (code == 13) {tag = target.tagname ؛ if (tag == "input") {return false ؛ } آخر {return true ؛ }}}}} ؛ </script>أمثلة استخدام محددة:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <٪@ page language = "java" import = "java.util. http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "expires" content = "0" gotOpage (currentpage ، form) {goto_page (currentpage ، form ، "actionDiv") ؛ } وظيفة addAppGrp () {$ ("#actiondiv"). load ("$ {contextpath} /pages/manage/business/add.jsp") ؛ $ ("#Chance_search_div"). Hide () ؛ } الدالة modifyAppGrp (idName) {var id = EncodeUricomponent (idName) ؛ var url = contextName + "/appgrpaction.do؟method=AdDappgrp&appgrpname="+ ؛ RetrieveUrl (url ، 'actiondiv') ؛ $ ("#Chance_search_div"). Hide () ؛ } الوظيفة SaveBusiness (thisform) {var name = $ ("#appgrpname"). val () ؛ if (name.trim () == "") {Alert ("لا يمكن أن يكون اسم المجموعة فارغًا.") ؛ يعود؛ } submitform (thismorm ، null ، aftersave) ؛ يعود ؛ } الدالة بعد المحتوى) {if (content! = null && content! = "") {var arr = content.split ("،") ؛ if (arr [0] == "true") {$ ("#stank_search_div"). show () ؛ // current node var itemid = "0 ::" + $ ("#appgrpname"). val () ؛ // presid node ، لأن هذه الطريقة يتم تنفيذها فقط عند إضافة مجموعة تطبيق الجذر ، تكون العقدة الأصل بشكل موحد -1 var parentid = -1 ؛ . // إضافة Node Tree.insertNewChild (ParentId ، itemId ، itemText ، doonClick ، 'MyFolderClosed.gif' ، 'myfolderopen.gif' ، 'myfolderClosed.gif') ؛ RetrieveUrl ("$ {contextPath}/appgrpaction.do؟method=AppGrplist" ، "ActionDiv") ؛ يعود؛ } تنبيه (arr [1]) ؛ يعود؛ } تنبيه ("حفظ فشل") ؛ يعود؛ } دالة deleteBusiness (هذا الشكل ، idname) {if (تأكيد ("هل تريد حذف؟")) {var id = EncodeUricomponent (idName) ؛ RetrieveUrl ("$ {contextpath}/appgrpaction.do؟method=deleteAppRP&appgrpname=" + id ، null ، null ، function (content) {if (content! = null && content! = ") {var arr = content.split (" ، ") ؛ بموجب مجموعة التطبيق هذه. هل تريد فرض حذفه؟ " itemid = " يعود ؛ }} الدالة fustforcedel () {if (content! = null && content! = "") {var arr = content.split ("،") ؛ if (arr [0] == "true") {monitorTree () ؛ RetrieveUrl ("$ {contextPath}/appgrpaction.do؟method=AppGrplist" ، "ActionDiv") ؛ يعود؛ } تنبيه (arr [1]) ؛ يعود؛ } تنبيه ("حفظ فشل") ؛ يعود؛ } الدالة enter_down (النموذج ، الحدث) {if (event.keycode == "13") {stopDefault (event) ؛ إرسال (نموذج ، "ActionDiv") ؛ }} function stopDefault (e) {// إذا تم توفير كائن حدث ، فهذا عبارة عن متصفح غير ie إذا (e && e.preventDefault) {// قم بحظر إجراء المتصفح الافتراضي (W3C) E.PreventDefault () ؛ } آخر {// كيفية حظر الإجراء الافتراضي للوظيفة في ie window.event.ReturnValue = false ؛ } إرجاع خطأ ؛ } </script> </head> <body> <body> <tr> <td style = "text-align: left ؛"> <div id = "shank_search_div"> <html: form action = "appgrpaction.do؟method=appgrplist"> <table> <tr> query <ther type = "hidden = <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 = "button" value = "query" onClick = "javaScript: submitform (this.form ، 'actionDiv') ؛" /> <type type = "button" value = "add" onClick = "javaScript: addAppGrp () ؛"/> <br/> </td> </td> <tr> </table> </tml: form> </viv> <div id = "actiondiv"> </div> </td> </tabling> <script }/appgrpaction.do؟method=AppGrplist&Random= " + Math.Random ()) ؛ -> </script> </body> </html>الكود أعلاه لمنع سلوك المتصفح الافتراضي وسلوك الفقاعات من JS هو كل المحتوى الذي أشاركه معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.