Event.stopPropagation और event.preventDefault में क्या अंतर है?

Question

वे एक ही काम कर रहे हैं ...
क्या एक आधुनिक और एक पुराना है? या वे विभिन्न ब्राउज़रों द्वारा समर्थित हैं?

जब मैं घटनाओं को खुद (फ्रेमवर्क के बिना) संभालता हूं तो मैं हमेशा दोनों के लिए जांचता हूं और अगर मौजूद है तो दोनों को निष्पादित करता हूं। (मैं भी return false, लेकिन मुझे लगता है कि घटनाओं के साथ जुड़े काम नहीं करता है node.addEventListener)।

तो दोनों क्यों? क्या मुझे दोनों की जाँच करते रहना चाहिए? या वास्तव में कोई अंतर है?

(मुझे पता है, बहुत सारे प्रश्न हैं, लेकिन वे सभी समान =) हैं

Answer 1

stopPropagation घटना श्रृंखला को बुदबुदाने से रोकता है।

preventDefault ब्राउज़र उस घटना पर डिफ़ॉल्ट कार्रवाई को रोकता है।

उदाहरण

चूक को रोकें

$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

stopPropagation

$("#but").click(function (event) {
  event.stopPropagation()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

के साथ stopPropagation, केवल buttonक्लिक हैंडलर कहा जाता है, जबकि divक्लिक हैंड हैंडलर कभी नहीं आग।

जैसे कि यदि आप उपयोग करते हैं preventDefault, तो केवल ब्राउज़र की डिफ़ॉल्ट क्रिया बंद हो जाती है, लेकिन div के क्लिक हैंडलर में आग लग जाती है।

नीचे DOM घटना गुणों और MDN से विधियों पर कुछ डॉक्स दिए गए हैं:

• event.cancelBubble
• event.preventDefault()
• event.returnValue
• event.stopPropagation()

IE9 और FF के लिए आप बस StopDefault & stopPropagation का उपयोग कर सकते हैं।

IE8 का समर्थन करने के लिए और निम्न के stopPropagationसाथ cancelBubbleबदलें और preventDefaultसाथ बदलेंreturnValue

Comments

तो वे बहुत अलग हैं? क्या IE के लिए दो अलग-अलग ईवेंट विधियां भी हैं? (हो सकता है कि वे एक ही हों?) यह अजीब है कि फ्रेमवर्क दोनों अपने event.stopकार्य में करते हैं ... इसके अलावा अजीब है कि मुझे कभी भी परेशानी नहीं हुई। मैं बुदबुदाहट का उपयोग करता हूं। उदाहरण के लिए धन्यवाद!

— रूडी

@Rudie ने ब्राउज़र समर्थन पर टिप्पणी की।

— रेयनोस

यह ध्यान देने योग्य बात (मामले में आप MSDN डॉक्स को देखने नहीं है) के लायक है कि cancelBubbleऔर returnValueदोनों गुण (ताकि सेट होना चाहिए cancelBubble = true;), और कहा कि preventDefaultऔर stopPropagationतरीकों (तथाकथित किया जाना चाहिए रहे हैं preventDefault();)

— freefaller

@Raynos, सिर्फ एक नोट: event.stopPropagation () न केवल ईवेंट श्रृंखला को बुदबुदाने से रोकता है, बल्कि कैप्चरिंग चरण ( developer.mozilla.org/en-US/docs/Web/) में इवेंट के प्रचार को भी रोक देता है एपीआई / घटना / stopPropagation )

— Yuci

यह जानना उपयोगी होगा कि एक बटन क्लिक के लिए डिफ़ॉल्ट क्रिया क्या है इसलिए मैं इस बारे में तर्क दे सकता हूं stopDefault()कि उसी तरह काम क्यों नहीं करता है stopPropagation()। यदि डिफ़ॉल्ट क्रिया onclickविधि नहीं कह रही है तो वह क्या है?

— d512

Answer 2

शब्दावली

से quirksmode.org :

इवेंट कैप्चरिंग

जब आप ईवेंट कैप्चरिंग का उपयोग करते हैं

               | |
--------------- | | -----------------
| तत्व 1 | | |
| ----------- | | ----------- |
| | एलिमेंट 2 \ / | |
| ------------------------- - |
| इवेंट कैप्चरिंग |
-----------------------------------

एलिमेंट 1 का ईवेंट हैंडलर पहले फायर करता है, एलिमेंट 2 का ईवेंट हैंडलर आखिरी बार फायर करता है।

घटना बुदबुदाई

जब आप इवेंट बबलिंग का उपयोग करते हैं

               / \ _
--------------- | | -----------------
| तत्व 1 | | |
| ----------- | | ----------- |
| | तत्व २ | | | |
| ------------------------- - |
| इवेंट बबलिंग |
-----------------------------------

एलिमेंट 2 का ईवेंट हैंडलर पहले फायर करता है, एलिमेंट 1 का ईवेंट हैंडलर आखिरी बार फायर करता है।

W3C ईवेंट मॉडल में होने वाली किसी भी घटना को पहले तब तक कैप्चर किया जाता है जब तक कि वह टार्गेट एलिमेंट तक नहीं पहुंच जाती और फिर से बुलबुले बन जाती है ।

                 | | / \ _
----------------- | | - | | -----------------
| तत्व 1 | | | | |
| ------------- | | - | | ----------- |
| | एलिमेंट 2 \ / | | | |
| -------------------------------- |
| W3C इवेंट मॉडल |
------------------------------------------

इंटरफेस

इवेंट कैप्चर के लिए w3.org से :

यदि कैप्चरिंग EventListenerईवेंट के आगे के प्रसंस्करण को रोकने की इच्छा रखता है, तो यह इंटरफ़ेस की stopPropagationविधि कह सकता Eventहै। यह घटना के आगे प्रेषण को रोक देगा, हालांकि EventListenersसमान पदानुक्रम स्तर पर पंजीकृत अतिरिक्त अभी भी घटना को प्राप्त करेगा। एक बार किसी घटना के stopPropagation तरीके को कॉल करने के बाद, उस विधि पर आगे कॉल का कोई अतिरिक्त प्रभाव नहीं होता है। यदि कोई अतिरिक्त कैप्चरर्स मौजूद stopPropagationनहीं है और उसे नहीं बुलाया गया है, तो ईवेंट EventListenersलक्ष्य पर ही उपयुक्त हो जाता है।

के लिए घटना उत्साह से भरा हुआ :

कोई भी ईवेंट हैंडलर इंटरफ़ेस की stopPropagationविधि को कॉल करके आगे के प्रसार को रोकने के लिए चुन सकता Eventहै। यदि कोई EventListenerइस विधि को कॉल करता है, EventListenersतो चालू पर अतिरिक्त सभी चालू EventTargetहो जाएगा लेकिन बुदबुदाती उस स्तर पर समाप्त हो जाएगी। stopPropagationआगे बुदबुदाहट को रोकने के लिए केवल एक कॉल की आवश्यकता है।

के लिए घटना निरस्तीकरण :

निरस्तीकरण को फोन करके पूरा किया है Eventकी preventDefault विधि। यदि किसी भी चरण के दौरान एक या अधिक EventListenersकॉल preventDefaultप्रवाहित होती हैं तो डिफ़ॉल्ट क्रिया रद्द कर दी जाएगी।

उदाहरण

निम्नलिखित उदाहरणों में, वेब ब्राउज़र में हाइपरलिंक पर एक क्लिक से ईवेंट का प्रवाह (ईवेंट श्रोताओं को निष्पादित किया जाता है) और इवेंट टारगेट की डिफ़ॉल्ट क्रिया (एक नया टैब खोला जाता है) चालू हो जाता है।

HTML:

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

जावास्क्रिप्ट:

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}

function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}

// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

उदाहरण 1 : इसका परिणाम आउटपुट है

DIV event capture
A event capture
A event bubbling
DIV event bubbling

उदाहरण 2 : stopPropagation()फ़ंक्शन में जोड़ना

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

परिणाम में परिणाम

DIV event capture

ईवेंट श्रोता ने इस घटना के आगे और नीचे के प्रसार को रोक दिया। हालाँकि यह डिफ़ॉल्ट क्रिया (नया टैब खोलने) को नहीं रोकता था।

उदाहरण 3 : stopPropagation()फ़ंक्शन में जोड़ना

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

या समारोह

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

परिणाम में परिणाम

DIV event capture
A event capture
A event bubbling

ऐसा इसलिए है क्योंकि दोनों ईवेंट श्रोता एक ही ईवेंट लक्ष्य पर पंजीकृत हैं। इवेंट श्रोताओं ने इवेंट के आगे के प्रसार को रोक दिया। हालांकि उन्होंने डिफ़ॉल्ट कार्रवाई (एक नया टैब खोलने) को नहीं रोका।

उदाहरण 4 : उदाहरण केpreventDefault() लिए, किसी भी फ़ंक्शन को जोड़ना

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

नए टैब को खोलने से रोकता है।

Comments

कैप्चरिंग और बुदबुदाई के बीच गहरे अंतर के लिए धन्यवाद, जबकि अन्य जवाब केवल jQuery के चिंताओं को संबोधित करता है।

— फ्लोरीबोन

@floribon का कहना है कि आपके पास रेयानोस को उसके जवाब के लिए अपमानित करने का कोई इरादा नहीं है।

— माही

@ माही क्या? मैं केवल तथ्य कह रहा हूं, स्वीकृत उत्तर jQuery का उपयोग कर रहा है जो ओपी द्वारा ग्रहण नहीं किया गया है, इसलिए मेरे लिए यह वास्तविक उत्तर नहीं है। अब यह सिर्फ तकनीकी तथ्य है, कुछ भी व्यक्तिगत नहीं है और कोई भी नाराज नहीं है।

— फ्लोरिबोन

आपका जवाब बहुत व्यवस्थित है और अच्छी तरह से प्रदर्शित करता है कि क्या चल रहा है। शुरू में मैं आपको परेशान नहीं करना चाहता था और अपने जवाब में कुछ बदलाव खुद कर सकता था, क्योंकि मुझे लगता है कि स्पष्टता के लिए इसमें थोड़ा सुधार किया जा सकता है। यह उत्तर शुरुआती लोगों को ईवेंट मॉडल के बारे में बताता है और इस तरह, मुझे लगता है कि शुरुआती लोगों को हम जो भी सहायता दे सकते हैं वह बहुत लंबा रास्ता तय करता है। मेरे संपादित सुझाव को सामान्य तर्कों से अस्वीकार कर दिया गया है, जिससे मैं असहमत हूं। यदि आप, @Ashkan, को लगता है कि ये छोटे परिवर्तन उत्तर को बेहतर बनाने में मदद कर सकते हैं, तो कृपया उन्हें शामिल करें।

— मुशाहो

Answer 3

विवरण झूठा है;

---

return false; जब आप इसे कहते हैं तो 3 अलग-अलग चीजें करता है:

1. event.preventDefault() - यह ब्राउज़रों के डिफ़ॉल्ट व्यवहार को रोकता है।
2. event.stopPropagation() - यह DOM को प्रचार (या "बुदबुदाने") से रोकता है।
3. कॉलबैक निष्पादन रोक देता है और कॉल किए जाने पर तुरंत वापस आ जाता है।

ध्यान दें कि यह व्यवहार सामान्य (गैर-jQuery) इवेंट हैंडलर से भिन्न होता है, जिसमें, विशेष रूप से, return falseइवेंट को बुदबुदाहट से नहीं रोकता है।

चूक को रोकें();

---

preventDefault(); एक काम करता है: यह ब्राउज़र डिफ़ॉल्ट व्यवहार को रोकता है।

उनका उपयोग कब करें?

---

हम जानते हैं कि वे क्या करते हैं लेकिन उनका उपयोग कब करना है? बस यह इस बात पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं। preventDefault();यदि आप "बस" डिफ़ॉल्ट ब्राउज़र व्यवहार को रोकना चाहते हैं का उपयोग करें । झूठे का उपयोग करें; जब आप डिफ़ॉल्ट ब्राउज़र व्यवहार को रोकना चाहते हैं और ईवेंट को DOM के प्रचार से रोकना चाहते हैं। अधिकांश स्थितियों में जहां आप झूठे का उपयोग करेंगे; आप वास्तव में क्या चाहते हैं preventDefault()।

उदाहरण:

---

आइए उदाहरणों के साथ समझने की कोशिश करें:

हम शुद्ध JAVASCRIPT उदाहरण देखेंगे

उदाहरण 1:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

उपरोक्त कोड आप हाइपरलिंक दिखाई देगा, भागो 'के लिए यहाँ क्लिक stackoverflow.com यात्रा करने के लिए' अब अगर आपको लगता है कि लिंक पर क्लिक करें पहले आप जावास्क्रिप्ट अलर्ट भी प्राप्त होगा लिंक पर क्लिक किया इसके बाद आप जावास्क्रिप्ट अलर्ट भी प्राप्त होगा div क्लिक किया और तुरंत आप के लिए पुनः निर्देशित किया जाएगा stackoverflow.com।

उदाहरण 2:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

उपर्युक्त कोड चलाएं आपको हाइपरलिंक दिखाई देगा 'यहां क्लिक करें stackoverflow.com पर जाएं' अब यदि आप उस लिंक पर क्लिक करते हैं तो सबसे पहले आपको जावास्क्रिप्ट अलर्ट मिलेगा लिंक पर क्लिक किया गया अगला आपको जावास्क्रिप्ट अलर्ट मिलेगा दिवार अगला क्लिक करने पर आपको हाइपरलिंक दिखाई देगा ' Stackoverflow.com पर जाने के लिए यहाँ क्लिक करें 'पाठ' द्वारा रोके गए इवेंट पर क्लिक करें 'और आप stackoverflow.com पर पुनर्निर्देशित नहीं होंगे। इसका कारण> से event.preventDefault () विधि है जिसे हमने डिफ़ॉल्ट क्लिक क्रिया को ट्रिगर करने से रोकने के लिए उपयोग किया था।

उदाहरण 3:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

इस बार यदि आप लिंक पर क्लिक करते हैं तो फंक्शन एग्जीक्यूटपेंट () नहीं कहा जाएगा और आपको इस बार जावास्क्रिप्ट अलर्ट डी क्लिक नहीं मिलेगा । यह हमारे लिए इवेंट .stopPropagation () पद्धति का उपयोग करके पैरेंट div को प्रसार को रोकने के कारण है। आगे आपको हाइपरलिंक दिखाई देगा 'यहां क्लिक करें stackoverflow.com पर जाएँ' पाठ के स्थान पर 'ईवेंट होने जा रहा है' पर क्लिक किया जाएगा और तुरंत ही आपको stackoverflow.com पर रीडायरेक्ट किया जाएगा। ऐसा इसलिए है क्योंकि हमने इस बार इवेंट.preventDefault () विधि का उपयोग करके डिफ़ॉल्ट क्लिक कार्रवाई को ट्रिगर करने से नहीं रोका है।

उदाहरण 4:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

यदि आप लिंक पर क्लिक करते हैं, तो फंक्शन एक्जीक्यूटपेंट () नहीं कहा जाएगा और आपको जावास्क्रिप्ट अलर्ट नहीं मिलेगा। यह हमारे लिए इवेंट .stopPropagation () पद्धति का उपयोग करके पैरेंट div को प्रसार को रोकने के कारण है। आगे आपको हाइपरलिंक दिखाई देगा 'यहाँ क्लिक करें stackoverflow.com पर जाएँ' पाठ के स्थान पर 'ईवेंट रोके जाने से रोका गया' और आप stackoverflow.com पर पुनर्निर्देशित नहीं होंगे। ऐसा इसलिए है क्योंकि हमने इस बार इवेंट.preventDefault () विधि का उपयोग करके डिफ़ॉल्ट क्लिक कार्रवाई को ट्रिगर करने से रोका है।

उदाहरण 5:

झूठे झूठ के लिए मेरे पास तीन उदाहरण हैं और सभी ठीक उसी काम को करते हुए दिखाई देते हैं (केवल झूठे लौटते हुए), लेकिन वास्तव में परिणाम काफी भिन्न होते हैं। यहाँ उपरोक्त में से प्रत्येक में वास्तव में क्या होता है।

मामलों:

1. इनलाइन ईवेंट हैंडलर से झूठा वापस आना ब्राउज़र को लिंक पते पर नेविगेट करने से रोकता है, लेकिन यह ईवेंट को DOM के माध्यम से प्रचारित करने से नहीं रोकता है।
2. रिटर्निंग झूठी एक jQuery ईवेंट हैंडलर से लिंक का पता करने के लिए नेविगेट करने से ब्राउज़र को रोकता है और यह डोम के माध्यम से प्रचार से घटना रुक जाती है।
3. एक नियमित DOM इवेंट हैंडलर से झूठे वापस आने पर कुछ नहीं होता है।

तीनों उदाहरण देखेंगे।

1. इनलाइन वापसी झूठी।

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

2. एक jQuery इवेंट हैंडलर से गलत रिटर्निंग ।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='https://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

3. एक नियमित DOM ईवेंट हैंडलर से गलत रिटर्निंग।

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

आशा है कि ये उदाहरण स्पष्ट हैं। HTML फ़ाइल में इन सभी उदाहरणों को निष्पादित करने का प्रयास करें कि वे कैसे काम करते हैं।

Comments

अच्छे उदाहरण, लेकिन jQuery के बिना भी बेहतर होता, क्योंकि jQuery इवेंट ऑब्जेक्ट को फेक करता है, इसलिए यह तकनीकी रूप से अलग है।

— रुडी

@Rudie मैंने अपना उत्तर अपडेट किया और उसमें से jquery को हटा दिया, और वापसी के लिए उदाहरण भी जोड़ा।

— भट्ट

Answer 4

यहीं से बोली है

event.preventDefault

StopDefault विधि एक घटना को उसकी डिफ़ॉल्ट कार्यक्षमता को पूरा करने से रोकती है। उदाहरण के लिए, आप वर्तमान पृष्ठ को छोड़ने से उस तत्व को क्लिक करने से रोकने के लिए A तत्व पर preventDefault का उपयोग करेंगे:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

जबकि तत्व की डिफ़ॉल्ट कार्यक्षमता को ईजाद किया जाता है, फिर भी ईवेंट DOM को बबल करता रहता है।

Event.stopPropagation

दूसरी विधि, stopPropagation, घटना की डिफ़ॉल्ट कार्यक्षमता को होने देती है लेकिन घटना को प्रचारित करने से रोकती है:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation प्रभावी रूप से माता-पिता के तत्वों को उसके बच्चे पर दी गई घटना के बारे में जानने से रोकता है।

जबकि एक सरल स्टॉप विधि हमें घटनाओं को जल्दी से संभालने की अनुमति देती है, यह सोचना महत्वपूर्ण है कि वास्तव में आप बुदबुदाती के साथ क्या करना चाहते हैं। मुझे यकीन है कि सभी डेवलपर वास्तव में चाहते हैं 90% समय की रोकथाम है! गलत तरीके से "रोकना" एक घटना आपको लाइन के नीचे कई परेशानियां पैदा कर सकती है; आपके प्लगइन्स काम नहीं कर सकते हैं और आपकी थर्ड पार्टी प्लगइन्स को ईंट किया जा सकता है। या इससे भी बदतर - आपका कोड किसी साइट पर अन्य कार्यक्षमता को तोड़ता है।

Answer 5

Event.preventDefault- ब्राउज़र डिफ़ॉल्ट व्यवहार को रोकता है। अब आता है कि ब्राउज़र डिफ़ॉल्ट व्यवहार क्या है। मान लें कि आपके पास एक एंकर टैग है और इसे एक href विशेषता मिली है और यह एंकर टैग एक div टैग के अंदर नेस्टेड है जिसे क्लिक इवेंट मिल गया है। एंकर टैग का डिफ़ॉल्ट व्यवहार तब होता है जब एंकर टैग पर क्लिक किया जाना चाहिए, लेकिन इसे क्या करना चाहिए। इस मामले में नेविगेशन बंद कर देता है। लेकिन यह कभी भी ईवेंट के उछलने या घटना के बढ़ने को नहीं रोकता है

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>

$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

परिणाम होगा

"तत्व क्लिक किया गया"

"कंटेनर को क्लिक किया गया"

अब Event.StopPropation यह घटना या घटना की वृद्धि को रोक देता है। अब ऊपर के उदाहरण के साथ

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

रिजल्ट होगा

"तत्व क्लिक किया गया"

अधिक जानकारी के लिए इस लिंक को देखें https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

Answer 6

event.preventDefault(); किसी तत्व की डिफ़ॉल्ट क्रिया को होने से रोकता है।

event.stopPropagation(); डोम ट्री को बुदबुदाने से घटना को रोकता है, किसी भी माता-पिता के हैंडलर को घटना की सूचना देने से रोकता है।

उदाहरण के लिए, अगर वहाँ एक के एक क्लिक विधि संलग्न अंदर के साथ एक लिंक है DIVया FORMवह भी संलग्न एक क्लिक विधि है, यह नहीं कर पाएगा DIVया FORMफायरिंग से विधि पर क्लिक करें।

Answer 7

$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>