javascript - event.preventDefault() مقابل إرجاع false




jquery javascript-events (8)

أعتقد

event.preventDefault()

هي طريقة w3c المحددة لإلغاء الأحداث.

يمكنك قراءة هذا في مواصفات W3C على إلغاء الحدث .

كما لا يمكنك استخدام العودة كاذبة في كل حالة. عند إعطاء وظيفة javascript في السمة href وإذا قمت بإرجاع false ، فستتم إعادة توجيه المستخدم إلى صفحة تحتوي على سلسلة مزيفة مكتوبة.

عندما أريد منع معالجات الأحداث الأخرى من التنفيذ بعد إطلاق حدث معين ، يمكنني استخدام أحد التقنيتين. سأستخدم jQuery في الأمثلة ، ولكن هذا ينطبق على Plain-JS أيضًا:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

هل هناك فرق كبير بين هاتين الطريقتين لوقف انتشار الحدث؟

بالنسبة لي ، return false; هو أبسط وأقصر وربما أقل عرضة للخطأ من تنفيذ طريقة. مع الطريقة ، عليك أن تتذكر حول الغلاف الصحيح ، الأقواس ، إلخ.

أيضا ، لا بد لي من تحديد المعلمة الأولى في رد الاتصال لتكون قادرة على استدعاء الأسلوب. ربما ، هناك بعض الأسباب التي تجعلني يجب تجنب فعل ذلك مثل هذا واستخدام preventDefault بدلا من ذلك؟ ما هي الطريقة الأفضل؟


أعتقد أن أفضل طريقة للقيام بذلك هي استخدام event.preventDefault() لأنه إذا تم رفع بعض الاستثناءات في المعالج ، فسيتم تخطي بيان الإرجاع false ويكون السلوك عكس ما تريد.

ولكن إذا كنت متأكدًا من أن الشفرة لن تؤدي إلى تشغيل أي استثناءات ، فيمكنك الانتقال بأي طريقة تريدها.

إذا كنت لا تزال تريد الذهاب مع false ، فيمكنك وضع رمز المعالج بالكامل في كتلة catch المحاولة كما هو موضح أدناه:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

بشكل عام ، يكون خيارك الأول ( preventDefault() ) هو الخيار الذي يجب عليك preventDefault() ، ولكن عليك أن تعرف ما هو السياق الذي أنت فيه وما هي أهدافك.

الوقود الترميز الخاص بك لديه مقالة رائعة على return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

ملاحظة: إن رابط ترميز الوقود أعلاه ينتج أخطاء 5xx لبعض الوقت. لقد وجدت نسخة منه في أرشيف الإنترنت ، طبعته إلى PDF ، ووضعته في Dropbox: المقالة المؤرشفة عند return false; ضد event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)


رأيي من تجربتي قائلا ، أنه من الأفضل دائما للاستخدام

event.preventDefault() 

عمليا لوقف أو منع تقديم الحدث ، كلما طلبنا بدلاً من return false event.preventDefault() return false event.preventDefault() يعمل بشكل جيد.


من تجربتي ، هناك ميزة واضحة واحدة على الأقل عند استخدام event.preventDefault () عبر استخدام false false. لنفترض أنك تلتقط حدث النقرة على علامة ارتساء ، وإلا ستكون مشكلة كبيرة إذا كان المستخدم سيبتعد عن الصفحة الحالية. إذا كان معالج النقر الخاص بك يستخدم false return لمنع التنقل في المستعرض ، فإنه يفتح إمكانية عدم وصول المترجم إلى بيان الإرجاع وسيتابع المتصفح تنفيذ السلوك الافتراضي لعلامة الارتساء.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

الفائدة من استخدام event.preventDefault () هي أنه يمكنك إضافة هذا السطر الأول في المعالج ، مما يضمن عدم إطلاق السلوك الافتراضي في anchor ، بغض النظر إذا لم يتم الوصول إلى السطر الأخير من الدالة (على سبيل المثال ، خطأ وقت التشغيل ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

هذا ليس كما أسميته ، سؤال "جافا سكريبت". إنه سؤال يتعلق بتصميم jQuery.

يبدو أن jQuery والاقتباس السابق المرتبط من John Resig (في message karim79's ) هو مصدر سوء الفهم لكيفية عمل معالجات الأحداث بشكل عام.

حقيقة: يمنع معالج الحدث الذي يقوم بإرجاع false الإجراء الافتراضي لهذا الحدث. لا يوقف انتشار الحدث. عملت معالجات الحدث دائمًا بهذه الطريقة ، منذ الأيام القديمة لـ Netscape Navigator.

توضح الوثائق من MDN كيفية return false في معالج الحدث

ما يحدث في jQuery ليس هو نفسه كما يحدث مع معالجات الأحداث. المستمعين الحدث DOM و MSIE "المرفقة" الأحداث هي مسألة مختلفة تماما.

لمزيد من القراءة ، راجع attachEvent على MSDN ووثائق W3C DOM 2 Events .


يمكنك تعليق الكثير من الوظائف في حدث onClick لعنصر واحد. كيف يمكنك أن تتأكد من أن الشخص false هو آخر شخص يطلق النار؟ يمنع preventDefault من ناحية أخرى بالتأكيد السلوك الافتراضي للعنصر فقط.


return false من داخل معالج أحداث jQuery بشكل فعال نفس استدعاء e.preventDefault و e.stopPropagation على كائن jQuery.Event الذي تم تمريره .

e.preventDefault() على منع الحدث الافتراضي من e.stopPropagation() ، حيث e.stopPropagation() على منع الحدث من e.stopPropagation() return false وسيؤدي كلاهما. لاحظ أن هذا السلوك يختلف عن معالجات الأحداث العادية (غير jQuery) ، والتي لا يمكن فيها return false لا يؤدي إلى إيقاف الحدث من فقاعات.

المصدر: جون رزيق

أي فائدة لاستخدام event.preventDefault () على "return false" لإلغاء نقرة href؟







event-propagation