ইভেন্ট.প্রিভেন্টডিফল্ট () বনাম। মিথ্যা প্রত্যাবর্তন


2959

যখন আমি নির্দিষ্ট ইভেন্টটি বরখাস্ত হওয়ার পরে অন্যান্য ইভেন্ট হ্যান্ডলারদের সম্পাদন থেকে আটকাতে চাই, আমি দুটি কৌশলগুলির মধ্যে একটি ব্যবহার করতে পারি। আমি উদাহরণগুলিতে jQuery ব্যবহার করব, তবে এটি প্লেইন-জেএসের ক্ষেত্রেও প্রযোজ্য:

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পরিবর্তে ব্যবহার করা উচিত? এর চেয়ে ভাল উপায় কী?


172
নোট করুন যে jQuery এর দ্বারা অন্য হ্যান্ডারগুলি কার্যকর করতে বাধা preventDefaultদেয় না । এটা কি stopImmediatePropagationজন্য।
ক্রিসেন্ট টাটকা

19
@ ক্রিসেন্টফ্রেশ, এটি অন্যান্য (পরবর্তীকালে আবদ্ধ) হ্যান্ডলারের মৃত্যুদন্ড কার্যকর করতে বাধা দেয় ... ডিওএম নোডে ইভেন্টটি চালিত হয়। এটি কেবল বিস্তার রোধ করে না।
চোখের পলকহীনতা

37
এগুলি "ইভেন্টের প্রচার বন্ধ করার দুটি পদ্ধতি নয়?" e.preventDefault (); ডিফল্ট ক্রিয়া প্রতিরোধ করে, এটি ইভেন্টের প্রচার বন্ধ করে না, যা e.stopPropagation () দ্বারা করা হয়।
টিমো তিহোফ

24
এই প্রশ্ন এবং এর উত্তরগুলি jQuery সম্পর্কে। আপনি যদি এখানে সরল জাভাস্ক্রিপ্ট উত্তরের জন্য সন্ধান করতে এসেছেন, দেখুন ইভেন্ট.প্রিভেন্টডাফল্ট () বনাম বনাম প্রত্যাবর্তন করুন (কোনও জকিউয়ারি নেই)
ওরিওল

5
এই উত্তরে একটি সারণী রয়েছে যা সমস্ত স্ট্যাকওভারফ্লো.com
অ্যাড্রিয়েন

উত্তর:


2817

return falseথেকে একটি jQuery ইভেন্ট হ্যান্ডলার মধ্যে কার্যকরভাবে উভয় কলিং হিসাবে একই e.preventDefaultএবং e.stopPropagationগৃহীত উপর jQuery.Event অবজেক্ট।

e.preventDefault()ডিফল্ট ইভেন্টটি ঘটতে e.stopPropagation()বাধা দেবে, ঘটনাটিকে বুদবুদ হতে বাধা দেবে এবং return falseউভয়ই করবে। নোট করুন যে এই আচরণটি স্বাভাবিক (j-jQuery) ইভেন্ট হ্যান্ডলারের থেকে পৃথক হয় , যার মধ্যে উল্লেখযোগ্যভাবে ঘটনাটি বুদবুদ হওয়া থেকে বিরত return falseথাকে না

সূত্র: জন রেসিগ

একটি href ক্লিক বাতিল করতে "মিথ্যা ফিরুন" ওভার ইভেন্ট.প্রিভেন্টডেফল্ট () ব্যবহার করার কোনও সুবিধা?


126
return falseএকটি ডিওএম 2 হ্যান্ডলার থেকে ( addEventListenerকিছুই কিছুই করে না (ডিফল্টকে বাধা দেয় না বুদবুদ থামায় না; মাইক্রোসফ্ট ডিওএম 2-ইশ হ্যান্ডলার থেকে attachEvent)) এটি ডিফল্টটিকে বাধা দেয় না বুদবুদ; একটি ডিওএম 0 হ্যান্ডলার ( onclick="return ...") থেকে, এটি ডিফল্টকে প্রতিরোধ করে (সরবরাহিত আপনি returnএট্রিবিউটটিতে অন্তর্ভুক্ত করেছেন ) তবে বুদবুদ নয়; একটি jQuery ইভেন্ট হ্যান্ডলার থেকে, এটি উভয়ই করে, কারণ এটি একটি jQuery জিনিস Details বিবরণ এবং লাইভ টেস্টগুলি এখানে
টিজে ক্রাউডার

12
এটি এখানে "প্রচার" এবং "ডিফল্ট" সংজ্ঞায়িত করতে সহায়ক হবে। আমি একজনের জন্য তাদের বিভ্রান্ত করি। এটা কি সঠিক? প্রচার = আমার কোড (মূল উপাদানগুলির জন্য জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার)। ডিফল্ট = ব্রাউজার কোড (লিঙ্কগুলি, পাঠ্য নির্বাচন ইত্যাদি)
বব স্টেইন

5
বুদবুদ বলতে আসলে কী বোঝাতে চাই? উদাহরণ?
গোবিন্দ সাখারে

5
নোট -জিক্যুরি ইভেন্ট হ্যান্ডলারগুলিতে ইভেন্টের প্রচার বন্ধ return falseকরে না এমন বিষয়টি উল্লেখ করার জন্য +1 । অর্থাত <a href="#" onclick="return false">Test</a>নেই না সাড়া জাগানো থেকে ইভেন্ট থামাতে।
ডগ এস

424

আমার অভিজ্ঞতা থেকে, ইভেন্টটি.প্রিভেন্টডাফল্ট () রিটার্ন মিথ্যা ব্যবহার করার সময় কমপক্ষে একটি পরিষ্কার সুবিধা রয়েছে। ধরুন আপনি ক্লিকের ইভেন্টটিকে একটি অ্যাঙ্কর ট্যাগে ক্যাপচার করছেন, অন্যথায় এটি যদি বর্তমান পৃষ্ঠা থেকে দূরে নেভিগেট করা হয় তবে এটি একটি বড় সমস্যা হবে। যদি আপনার ক্লিক হ্যান্ডলার ব্রাউজার নেভিগেশন রোধ করতে ফিরতি মিথ্যা ব্যবহার করে, এটি সম্ভবত দোভাষীটি রিটার্নের বিবৃতিতে না পৌঁছায় এবং ব্রাউজারটি অ্যাঙ্কর ট্যাগের ডিফল্ট আচরণ কার্যকর করতে এগিয়ে যায়।

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

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

  return false;
});

ইভেন্ট.প্রিভেন্টডিফল্ট () ব্যবহারের সুবিধাটি হ'ল আপনি হ্যান্ডলারের প্রথম লাইন হিসাবে এটিকে যুক্ত করতে পারবেন, যার ফলে গ্যারান্টি দেওয়া হবে যে ফাংশনের শেষ লাইনটি না পৌঁছানো ব্যতীত অ্যাঙ্গরের ডিফল্ট আচরণটি চালিত হবে না (উদাঃ রানটাইম ত্রুটি) )।

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

  // custom handling here

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

68
যদিও সত্য, প্রগতিশীল বর্ধন করার সময় বিপরীত আচরণটি প্রায়শই পছন্দনীয় (যা আমি মনে করি সম্ভবত কোনও ডিফল্ট ক্রিয়াকে ওভাররাইড করার সর্বাধিক কারণ)
ম্যানডমাইকোড

উভয়ই কোনও ইভেন্টের ডিফল্ট আচরণকে অবরুদ্ধ করার উপায়, আপনি কোন সমস্যার সমাধান করার চেষ্টা করছেন এটি এটি একটি বিষয়।
ফার্কে

102

এটি নয়, যেমন আপনি এটি শিরোনাম করেছেন, একটি "জাভাস্ক্রিপ্ট" প্রশ্ন; এটি jQuery এর নকশা সম্পর্কিত একটি প্রশ্ন।

jQuery এবং পূর্বে লিঙ্ক তলব থেকে জন Resig (ইন karim79 এর বার্তা ) সাধারণ কাজে কিভাবে ইভেন্ট হ্যান্ডলার উৎস ভুল বোঝাবুঝি বলে মনে হচ্ছে।

ঘটনা: একটি ইভেন্ট হ্যান্ডলার যা মিথ্যা ফিরিয়ে দেয় সেই ইভেন্টের জন্য ডিফল্ট ক্রিয়াকে বাধা দেয়। এটি ইভেন্টের প্রচার বন্ধ করে দেয় না। ইভেন্ট হ্যান্ডলাররা নেটস্কেপ নেভিগেটরের পুরানো দিন থেকে সর্বদা এইভাবে কাজ করে।

MDN থেকে ডকুমেন্টেশন ব্যাখ্যা return falseএকটি ইভেন্ট হ্যান্ডলার কাজ করে

JQuery এ যা ঘটে তা ইভেন্ট হ্যান্ডলারের সাথে ঘটে না। ডোম ইভেন্ট শ্রোতা এবং এমএসআইই "সংযুক্ত" ইভেন্টগুলি সম্পূর্ণ আলাদা বিষয় matter

আরও পড়ার জন্য, এমএসডিএন এবং ডাব্লু 3 সি ডোম 2 ইভেন্টের ডকুমেন্টেশন এ সংযুক্তি দেখুন ।


6
@ আরডিস যা বলছে "প্রতিরোধ ডিফল্ট ডিওএম-এর মাধ্যমে ইভেন্টটির আরও প্রচার বন্ধ করে না event ইভেন্ট.স্টপ প্রচারের জন্য এটি ব্যবহার করা উচিত" "
গ্যারেট

একটি উত্তর একটি ঘনিষ্ঠভাবে সম্পর্কিত প্রশ্নে অভিযোগ করেছে যে এইচটিএমএল 5 এর আগে একটি ইভেন্ট হ্যান্ডলার থেকে মিথ্যা ফিরে নি specced এ সব কিছু করছেন না। এখন, এটি সম্ভবত (বুঝতে অসুবিধা) অনুমানের একটি ভুল ব্যাখ্যা, বা এটি আক্ষরিকভাবে অনুমিত না হওয়া সত্ত্বেও সমস্ত ব্রাউজারগুলি return falseএকই ব্যাখ্যা করেছে event.preventDefault()। তবে আমি ডুনো; এক চিমটি নুন দিয়ে আমাকে এটি খাওয়াতে যথেষ্ট।
মার্ক আমেরিকা

9
আমি ঘৃণা করি যে গুগলে প্রতিটি জাভাস্ক্রিপ্ট অনুসন্ধানের ফলাফলটি আসলে jQuery সম্পর্কে কী, +1
আলেকজান্ডার ডার্ক

তিনি এটিকে উভয় জাভাস্ক্রিপ্ট এবং jQuery হিসাবে ট্যাগ করেছেন এবং উভয়ই সঠিক। jQueryএটি কেবল জাভাস্ক্রিপ্টের একটি উপ-সেট, নিজস্ব ভাষা নয়।
অধ্যাপক

67

সাধারণত, আপনার প্রথম বিকল্পটি ( preventDefault()) গ্রহণ করা হয় তবে আপনি কোন প্রসঙ্গে আছেন এবং আপনার লক্ষ্যগুলি কী তা আপনাকে জানতে হবে।

জ্বালানি আপনার কোডিং একটি দুর্দান্ত হয়েছে নিবন্ধ return false;বনাম event.preventDefault()বনাম event.stopPropagation()বনামevent.stopImmediatePropagation()


@ ভিসরথ সিভি আমার সংরক্ষণ করা নোটটি সংরক্ষণাগার সংস্করণে লিঙ্ক সহ দেখুন
জএএলডে

57

JQuery ব্যবহার return falseকরার সময়, আপনি যখন কল করেন তখন 3 আলাদা জিনিস করছেন:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. কলব্যাক এক্সিকিউশন বন্ধ করে এবং কল করার সাথে সাথে ফিরে আসে।

JQuery ইভেন্টগুলি দেখুন : আরও তথ্য এবং উদাহরণগুলির জন্য রিটার্ন মিথ্যা ব্যবহার বন্ধ করুন (মিস)


কোডের অন্যান্য অংশগুলি যদি এই ইভেন্টটি শুনছে, ইভেন্ট.স্টপপ্রোপেশন (); তাদের কলব্যাক বাতিল করবে?
ফার্কে

41

আপনি কোনও onClickউপাদানের জন্য ইভেন্টটিতে প্রচুর ফাংশন স্তব্ধ করতে পারেন । আপনি কীভাবে নিশ্চিত হতে পারেন যে falseআগুনের মধ্যে একজনই শেষজন হয়ে যাবে? preventDefaultঅন্যদিকে অবশ্যই উপাদানটির ডিফল্ট আচরণকে অবশ্যই প্রতিরোধ করবে।


20

আমি মনে করি

event.preventDefault()

ইভেন্টগুলি বাতিল করার W3c নির্দিষ্ট উপায় way

ইভেন্ট ক্যানসুলেশন সম্পর্কিত আপনি ডাব্লু 3 সি তে এটি পড়তে পারেন ।

এছাড়াও আপনি প্রতিটি পরিস্থিতিতে মিথ্যা রিটার্ন ব্যবহার করতে পারবেন না। Href অ্যাট্রিবিউটে জাভাস্ক্রিপ্ট ফাংশন দেওয়ার সময় এবং আপনি যদি মিথ্যা প্রত্যাবর্তন করেন তবে ব্যবহারকারীকে মিথ্যা স্ট্রিং লিখিত পৃষ্ঠাতে পুনর্নির্দেশ করা হবে।


4
আমার সাথে দেখা হয়েছে এমন কোনও ব্রাউজারে নেই। সম্ভবত আপনি যে <a href="javascript:return false"কিছু বা বিভ্রান্ত ?
এমপি্লুঞ্জন

10
-1; দাবী যে কোনও href যে মিথ্যা প্রত্যাবর্তন করে তা "মিথ্যা" শব্দটির সাথে একটি পাঠ্য পৃষ্ঠা উত্পন্ন করবে এটি সম্পূর্ণ বোকা।
মার্ক অ্যামেরি

1
(বিয়োগ) 1; ভাঙা লিঙ্ক + সম্পূর্ণ বোকা
ফিল

15

আমি মনে করি এটি করার সর্বোত্তম event.preventDefault()উপায়টি হ'ল ব্যবহার করা কারণ হ্যান্ডলারের মধ্যে যদি কিছু ব্যতিক্রম উত্থাপিত হয়, তবে রিটার্নের falseবিবৃতি এড়ানো হবে এবং আচরণটি আপনি যা চান তার বিপরীত হবে।

তবে আপনি যদি নিশ্চিত হন যে কোডটি কোনও ব্যতিক্রম ট্রিগার করবে না, তবে আপনি যে কোনও পদ্ধতির সাথে ইচ্ছামত যেতে পারেন।

আপনি যদি এখনও রিটার্নের সাথে যেতে চান false, তবে আপনি নীচের মত একটি সম্পূর্ণ ক্যাপ ব্লকে আপনার পুরো হ্যান্ডলার কোডটি রাখতে পারেন:

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

1

আমার অভিজ্ঞতা থেকে আমার মতামত বলছে, এটি ব্যবহার করা সর্বদা ভাল

event.preventDefault() 

কার্যত জমা দেওয়া বন্ধ বা প্রতিরোধ করার জন্য, যখনই আমাদের return false event.preventDefault()সূক্ষ্ম কাজ করার চেয়ে প্রয়োজন হয় ।


11
ভাল কেন? আপনি এখানে যা আছে তা আক্ষরিক অর্থে শূন্যতার ন্যায্যতা দিয়েছেন। -1।
মার্ক অ্যামেরি

একাধিক ইভেন্টের বাইন্ডিংয়ের ক্ষেত্রে, e.preventDefault () রিটার্ন মিথ্যা থেকে বেশি টার্গেটযুক্ত।
টাইগার

preventDefaultকিছু ইংরেজী শব্দ যা আমি এটি বুঝতে পারি "ডিফল্ট প্রতিরোধ করে"। return falseকিছু ইংরাজির শব্দ যা আমি এটি "মিথ্যা ফিরিয়ে দিয়েছি" তা বুঝতে পারি তবে কেন আমি এই গুপ্তচর কোডটি গুগল না করা পর্যন্ত আমার কোনও ধারণা নেই। এবং বোনাস, আমি আলাদাভাবে stopPropagationএবং নিয়ন্ত্রণ করতে পারি preventDefault
জোয়ান

1

return falseএবং এর মধ্যে প্রধান পার্থক্যটি event.preventDefault()হ'ল নীচে আপনার কোডটি return falseকার্যকর করা হবে না এবং event.preventDefault()যদি আপনার কোড এই বিবৃতি দেওয়ার পরে কার্যকর করা হয়।

আপনি যখন মিথ্যা রিটার্ন লিখেন তখন পর্দার আড়ালে আপনার জন্য নিম্নলিখিত জিনিসগুলি করা হয়।

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

1

e.preventDefault ();

এটি কেবল কোনও উপাদানের ডিফল্ট ক্রিয়া বন্ধ করে দেয়।

উদাহরণ উদাহরণ:

হাইপারলিংকটি ইউআরএল অনুসরণ করতে বাধা দেয়, ফর্মটি জমা দেওয়ার জন্য জমা বোতামটি বাধা দেয়। আপনার যখন অনেক ইভেন্ট হ্যান্ডলার থাকে এবং আপনি কেবল ডিফল্ট ইভেন্টটি ঘটতে বাধা দান করতে চান এবং বহুবার ঘটতে থাকে তার জন্য আমাদের ফাংশনটির শীর্ষে () ব্যবহার করতে হবে।

কারণ: -

ব্যবহারের কারণটি e.preventDefault();হ'ল আমাদের কোডটিতে কোডে কিছু ভুল হয়ে যায়, তবে এটি লিঙ্কটি বা ফর্মটি জমা দেওয়ার জন্য বা কার্যকর করার অনুমতি দেয় বা আপনাকে যা করার দরকার তা কার্যকর করতে দেয়। & লিঙ্ক বা জমা বোতাম জমা হবে এবং এখনও ইভেন্টটির আরও প্রচারের অনুমতি দেয়।

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

প্রত্যাবর্তন মিথ্যা;

এটি কেবল ফাংশন () সম্পাদন বন্ধ করে দেয়।

" return false;" প্রক্রিয়াটির সম্পূর্ণ সম্পাদন শেষ করবে।

কারণ: -

রিটার্ন মিথ্যা ব্যবহারের কারণ; আপনি ফাংশনটি আর কঠোরভাবে মোডে চালাতে চান না।

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


1

মূলত, আপনি জিনিসগুলি এইভাবে একত্রিত করুন কারণ jQuery একটি কাঠামো যা বেশিরভাগ এইচটিএমএল উপাদানগুলিতে ফোকাস করে, আপনি মূলত ডিফল্টটিকে প্রতিরোধ করেন, তবে একই সময়ে, আপনি বুদ্বুদ আপ করতে প্রচার বন্ধ করে দেন।

সুতরাং আমরা সহজেই বলতে পারি, মিথ্যা ফিরিয়ে দেওয়া jQueryসমান:

প্রত্যাবর্তন মিথ্যা হ'ল ই

তবে এগুলি সব jQuery বা DOM সম্পর্কিত ক্রিয়াকলাপে ভুলে যাবেন না, আপনি যখন এটি উপাদানটিতে চালান, মূলত, এটি ইভেন্টের ডিফল্ট আচরণ এবং প্রচার সহ গুলিচালনা থেকে সমস্ত কিছু রোধ করে।

মূলত ব্যবহার শুরু করার আগে return false;প্রথমে বুঝতে হবে কী e.preventDefault();এবংe.stopPropagation(); কী করবে, তারপরে যদি আপনি মনে করেন যে একই সময়ে আপনার উভয়ের প্রয়োজন হয় তবে কেবল এটি ব্যবহার করুন।

সুতরাং মূলত নীচে এই কোড:

$('div').click(function () {
  return false;
});

হয় সমান এই কোড হবে:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

1

আমার অভিজ্ঞতা থেকে ইভেন্ট.স্টপপ্রপাগেশন () বেশিরভাগ ক্ষেত্রে সিএসএস এফেক্ট বা অ্যানিমেশন কাজের ক্ষেত্রে ব্যবহৃত হয়, উদাহরণস্বরূপ যখন আপনি কার্ড এবং বোতাম উভয় উপাদানের জন্য হোভার ইফেক্ট রাখেন, যখন আপনি বাটনে হোভার করবেন তখন কার্ড এবং বোতাম উভয়ের প্রভাব এই ক্ষেত্রে ট্রিগার হবে will , আপনি ইভেন্ট.স্টপপ্রোপেশন () বুদবুদ ক্রিয়া বন্ধ করুন এবং ব্রাউজার ক্রিয়াকলাপের ডিফল্ট আচরণ রোধের জন্য ইভেন্ট.প্রিভেন্টডেফল্ট () ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনার কাছে ফর্ম রয়েছে তবে আপনি কেবলমাত্র জমা কর্মের জন্য ক্লিক ইভেন্ট সংজ্ঞায়িত করেছেন, যদি ব্যবহারকারী এন্টার টিপে ফর্মটি জমা দেয়, ব্রাউজারটি কিপ্রেস ইভেন্ট দ্বারা ট্রিগার হয়ে থাকে, আপনার ক্লিক ইভেন্টটি এখানে নয় আপনার অনুপযুক্ত ঘটনা এড়াতে ইভেন্ট.প্রিভেন্টডিফল্ট () ব্যবহার করা উচিত আচরণ। আমি জানি না কী মিথ্যা প্রত্যাবর্তন করছে; দুঃখিত। আরও স্পষ্টতার জন্য এই লিঙ্কটি দেখুন এবং লাইন # 33 দিয়ে খেলুনhttps://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.