event.preventDefault () बनाम गलत (कोई jQuery वापस)

Question 1

मैं सोचता था कि क्या event.preventDefault()और return falseवही थे।

मैंने कुछ परीक्षण किए हैं , और ऐसा लगता है

यदि ईवेंट हैंडलर को पुराने मॉडल का उपयोग करके जोड़ा जाता है, उदाहरण के लिए
```
elem.onclick = function(){
    return false;
};
```
फिर, return falseडिफ़ॉल्ट कार्रवाई को रोकता है, जैसे event.preventDefault()।
addEventListenerउदाहरण के लिए यदि ईवेंट हैंडलर का उपयोग किया जाता है
```
elem.addEventListener(
    'click',
    function(e){
        return false;
    },
    false
);
```
फिर, return falseडिफ़ॉल्ट क्रिया को नहीं रोकता है।

क्या सभी ब्राउज़र इस तरह का व्यवहार करते हैं?

वहाँ के बीच अधिक अंतर हैं event.preventDefault()और return false?

जहां मैं कुछ मामलों की return falseतरह व्यवहार के बारे में कुछ दस्तावेज (एमडीएन में नहीं कर सका) पा सकता हूं event.preventDefault()?

मेरा प्रश्न केवल सादे जावास्क्रिप्ट के बारे में है, jQuery के बारे में नहीं, इसलिए कृपया इसे इवेंट के डुप्लिकेट के रूप में चिह्नित न करें ।

Question 2

W3C दस्तावेज़ ऑब्जेक्ट मॉडल घटनाक्रम विशिष्टता में 1.3.1। इवेंट पंजीकरण इंटरफ़ेस बताता है कि handleEventEventListener में कोई वापसी मूल्य नहीं है:

handleEvent जब भी कोई ईवेंट उस प्रकार का होता है, जिसके लिए EventListener इंटरफ़ेस पंजीकृत किया गया था, तो यह विधि कहलाती है। [...] नो रिटर्न वैल्यू

के तहत 1.2.4। ईवेंट रद्द करना दस्तावेज़ में यह भी कहा गया है कि

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

जो आपको किसी भी प्रभाव का उपयोग करने से हतोत्साहित करना चाहिए जो किसी भी ब्राउज़र और उपयोग में सही / गलत हो सकता है event.preventDefault()।

अपडेट करें

HTML5 कल्पना वास्तव में निर्दिष्ट करती है कि रिटर्न वैल्यू को अलग कैसे माना जाए। HTML कल्पना की धारा 7.1.5.1 में कहा गया है कि

यदि वापसी मान एक WebIDL बूलियन गलत मान है, तो ईवेंट रद्द करें।

सब कुछ लेकिन "माउसओवर" घटना के लिए।

निष्कर्ष

मैं अब भी event.preventDefault()अधिकांश परियोजनाओं में उपयोग करने की सलाह दूंगा क्योंकि आप पुराने युक्ति और इस तरह पुराने ब्राउज़रों के साथ संगत होंगे। यदि आपको केवल अत्याधुनिक ब्राउज़रों का समर्थन करने की आवश्यकता है, तो रद्द करने के लिए झूठे वापस करना ठीक है।

Question 3

यहां कुछ उदाहरण दिए गए हैं जो लोगों को उनकी समस्याओं को बेहतर ढंग से समझने और उनका निवारण करने में मदद कर सकते हैं।

टी एल; डॉ

on*ईवेंट हैंडलर (जैसे onclickएक बटन तत्व पर विशेषता): ईवेंट को रद्द करने के लिए गलत लौटें
addEventListenerएक अलग एपीआई है, वापसी मान (जैसे false) को नजरअंदाज किया जाता है: उपयोग event.preventDefault()।
onclick="<somejs>"अपने स्वयं के संभावित भ्रम की स्थिति है क्योंकि <somejs>ऑन्कलिक फ़ंक्शन के शरीर में लिपटे हुए हैं।
getEventListenersयदि आपका ईवेंट हैंडलर अपेक्षा के अनुरूप व्यवहार नहीं कर रहा है, तो यह देखने के लिए कि आपके ईवेंट श्रोता को समस्या निवारण के लिए कैसा दिखता है, ब्राउज़र devtools API का उपयोग करें ।

उदाहरण

यह उदाहरण लिंक के clickसाथ ईवेंट के लिए विशिष्ट है <a>... लेकिन अधिकांश ईवेंट प्रकारों के लिए इसे सामान्यीकृत किया जा सकता है।

हमारे पास क्लास के साथ एक एंकर (लिंक) है js-some-link-hookजो हम एक मोडल खोलना चाहते हैं और किसी भी पेज नेविगेशन को होने से रोकते हैं।

नीचे दिए गए उदाहरण MacOS Mojave पर google chrome (71) में चलाए गए थे।

एक प्रमुख नुकसान यह है कि onclick=functionNameउपयोग करने के समान व्यवहार हैaddEventListener

मान लीजिए कि हमारे पास एक लंगर टैग (लिंक) है जिसे हम जावास्क्रिप्ट के साथ संभालना चाहते हैं जब जावास्क्रिप्ट सक्षम किया जाता है। हम नहीं चाहते कि ब्राउज़र लिंक पर क्लिक करें ("डिफ़ॉल्ट" व्यवहार को रोकें)।

<a href="https://www.example.com/url/to/go/to/when/no/javascript"
   class="js-some-link-hook">click me!</a>

विशेषता पर क्लिक करें

function eventHandler (event) {
    // want to prevent link navigation
    alert('eventHandler ran');
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.setAttribute('onclick', eventHandler);
}
addEventListenerToElement();

फिर ब्राउज़र devtools कंसोल में चलाएं:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

... और आप देखें:

function onclick(event) {
function eventHandler (event) {alert('eventHandler ran'); return false;}
}

यह बिल्कुल काम नहीं करता है। onclick=अपने हैंडलर फ़ंक्शन का उपयोग करते समय किसी अन्य फ़ंक्शन में लपेटा जाता है।

आप देख सकते हैं कि मेरी फ़ंक्शन परिभाषा शामिल है, लेकिन इसे कॉल नहीं किया गया है क्योंकि मैंने इसे संदर्भित किए बिना फ़ंक्शन संदर्भ निर्दिष्ट किया है। यानी हमें यह सुनिश्चित करने की आवश्यकता onclick="functionName()"नहीं onclick="functionName"है कि functionNameतत्व को क्लिक करने पर चलाया जाए।

इसके अलावा, आप देख सकते हैं कि भले ही मेरे फ़ंक्शन को कॉल किया गया था और मेरा फ़ंक्शन गलत लौटा था ... onclickफ़ंक्शन उस गलत मान को वापस नहीं करेगा ... जिसे इवेंट को 'रद्द' करना आवश्यक है।

इसे ठीक करने के लिए, हम वह सेट कर सकते onclickहैं return myHandlerFunc();जो यह सुनिश्चित करता है कि onclickरिटर्न वैल्यू (गलत) रिटर्न से myHandlerFunc।

तुम भी निकाल सकते return false;से myHandlerFuncऔर परिवर्तन onclickहोने के लिए myHandlerFunc(); return false;, लेकिन यह कम समझ में आता है जैसा कि आप शायद तर्क अपने हैंडलर समारोह में एक साथ रखना चाहते हैं।

onclickजावास्क्रिप्ट के साथ सेटिंग करते समय ध्यान दें , जब आप onclickजावास्क्रिप्ट (मेरे उदाहरणों की तरह) के बजाय सीधे html में सेट कर रहे हैं , तो onclickविशेषता मान टाइप स्ट्रिंग और सब कुछ काम करता है। यदि आप onclickजावास्क्रिप्ट का उपयोग कर सेट कर रहे हैं , तो आपको टाइप करने पर ध्यान देने की आवश्यकता है। यदि आप कहते हैं कि element.setAttribute('onclick', myHandlerFunc()) myHandlerFuncअभी चलाया जाएगा और परिणाम प्रत्येक क्लिक पर चलने के बजाय विशेषता में संग्रहीत किया जाएगा। इसके बजाय आपको यह सुनिश्चित करना चाहिए कि विशेषता मान स्ट्रिंग के रूप में सेट है। element.setAttribute('onclick', 'return myHandlerFunc();')

अब जब हम देखते हैं कि यह कैसे काम कर रहा है, तो हम जो चाहें वह करने के लिए कोड को संशोधित कर सकते हैं। उदाहरण के उद्देश्यों के लिए अजीब उदाहरण (इस कोड का उपयोग न करें):

function eventHandler (e) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(e);
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.setAttribute('onclick', 'return ('+eventHandler+')(event);');
}
addEventListenerToElement();

आप देखते हैं कि हमने अपने ईवेंटहैंडलर फ़ंक्शन की परिभाषा को स्ट्रिंग में लपेट दिया है। विशेष रूप से: एक स्व-निष्पादन वाला कार्य जो कि फ्रंट में रिटर्न स्टेटमेंट है।

फिर से क्रोम devtools कंसोल में:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

...दिखाता है:

function onclick(event) {
return (function eventHandler (e) {
        // want to prevent link navigation
        alert('eventHandler ran');
        console.log(e);
        return false;
    })(event);
}

... तो हाँ, यह काम करना चाहिए। इतना ज़रूर है कि अगर हम लिंक पर क्लिक करते हैं तो हमें अलर्ट मिलता है और अलर्ट को खारिज करते हुए पेज कहीं भी नेविगेट या रिफ्रेश नहीं होता है।

एक और ध्यान दें onclick... यदि आप eventघटना के समय पैरामीटर प्राप्त करना और उसका उपयोग करना चाहते हैं , तो आपको ध्यान देना चाहिए कि इसे "ईवेंट" नाम दिया गया है। आप नाम का उपयोग करके अपने eventअभिभावक के पास इसे एक्सेस कर सकते हैं (पैरेंट onclickफंक्शन स्कोप के माध्यम से उपलब्ध )। या आप eventएक पैरामीटर (परीक्षण के लिए बेहतर) के रूप में लेने के लिए अपने हैंडलर का निर्माण कर सकते हैं ... उदाहरण के लिए onclick="return myEventHandler(event);"या जैसा कि आप पिछले उदाहरण में देखते हैं।

addEventListener

function eventHandler (ev) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(ev);
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();

ब्राउज़र devtools:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

परिणाम:

function eventHandler (ev) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(ev);
    return false;
}

तो आप पहले से ही अंतर देख सकते हैं। साथ addEventListenerहम एक में लिपटे नहीं कर रहे हैं onclickकार्य करते हैं। हमारा हैंडलर eventसीधे पैरामीटर प्राप्त करता है (और इसलिए हम इसे जो चाहें कह सकते हैं)। इसके अलावा हमारे return falseयहां "शीर्ष स्तर" पर है और हमें इसके साथ अतिरिक्त रिटर्न स्टेटमेंट जोड़ने के बारे में चिंता करने की आवश्यकता नहीं है onclick।

तो ऐसा लगता है कि यह काम करना चाहिए। लिंक पर क्लिक करके हमें अलर्ट मिलता है। अलर्ट को खारिज कर दें और पृष्ठ नेविगेट / ताज़ा करें। यानी झूठी लौटकर घटना को रद्द नहीं किया गया था।

यदि हम युक्ति खोजते हैं (नीचे संसाधन देखें), तो हम देखते हैं कि addEventListener के लिए हमारा कॉलबैक / हैंडलर फ़ंक्शन रिटर्न प्रकार का समर्थन नहीं करता है। हम जो चाहें वापस कर सकते हैं, लेकिन चूंकि यह ब्राउज़र एपीआई / इंटरफ़ेस का हिस्सा नहीं है, इसलिए इसका कोई प्रभाव नहीं पड़ता है।

समाधान: के event.preventDefault()बजाय का उपयोग कर return false;...

function eventHandler (ev) {
    // want to prevent link navigation
    ev.preventDefault();
    alert('eventHandler ran');
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();

ब्राउज़र devtools ...

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

देता है ...

function eventHandler (ev) {
    // want to prevent link navigation
    ev.preventDefault();
    alert('eventHandler ran');
}

...जैसा सोचा था।

फिर से परीक्षण:

लिंक पर क्लिक करें।
अलर्ट हो जाएं।
अलर्ट को खारिज करें।
कोई पृष्ठ नेविगेशन या ताज़ा नहीं होता है ... जो हम चाहते हैं।

तो झूठे के रूप में addEventListenerउपयोग event.preventDefault()के साथ कुछ भी नहीं करता है।

साधन

https://www.w3.org/TR/dom41/#dom-eventtarget-addeventlistener
- इवेंट पंजीकरण (जैसे addEventListener)
https://www.w3.org/TR/dom41/#callbackdef-eventlistener
- कॉलबैक / हैंडलर / श्रोता def।
- नोट वापसी प्रकार शून्य है। यानी रिटर्न वैल्यू इंटरफेस का हिस्सा नहीं है और इसका कोई प्रभाव नहीं है।
https://www.w3.org/TR/dom41/#event
- ईवेंट ऑब्जेक्ट (जैसे Event.preventDefault)

एचटीएमएल 5 कल्पना ( https://www.w3.org/TR/html5/webappapis.html#events ) बातें confuses क्योंकि वे दोनों का उपयोग onclickऔर addEventListenerउनके उदाहरण में और वे निम्नलिखित कहते हैं:

ईवेंट हैंडलर एच और एक इवेंट ऑब्जेक्ट ई के लिए ईवेंट हैंडलर प्रोसेसिंग एल्गोरिथ्म इस प्रकार है:

...

प्रक्रिया वापसी मूल्य निम्नानुसार है:

...

यदि वापसी मान एक वेब IDL बूलियन गलत मान है, तो ईवेंट रद्द करें।

तो यह सूचित करते हैं कि लगता है return falseदोनों के लिए घटना को रद्द करता है addEventListenerऔर onclick।

लेकिन, अगर आप उनकी जुड़ी हुई परिभाषा को event-handlerदेखते हैं:

एक इवेंट हैंडलर का एक नाम है, जो हमेशा "चालू" से शुरू होता है और उसके बाद उस इवेंट के नाम से शुरू होता है, जिसके लिए उसका इरादा है।

...

इवेंट हैंडलर दो तरीकों में से एक में उजागर होते हैं।

पहला तरीका, सभी इवेंट हैंडलर के लिए सामान्य, एक इवेंट हैंडलर IDL विशेषता के रूप में है।

दूसरा तरीका एक ईवेंट हैंडलर सामग्री विशेषता के रूप में है। HTML तत्वों पर ईवेंट हैंडलर और विंडो ऑब्जेक्ट्स पर कुछ ईवेंट हैंडलर इस तरह से उजागर होते हैं।

https://www.w3.org/TR/html5/webappapis.html#event-handler

तो ऐसा लगता है कि return falseवास्तव में ईवेंट रद्द करना केवल onclick(या आम तौर पर on*) ईवेंट हैंडलर्स पर लागू होता है, न कि उन हैंडलर्स को ईवेंट करने के लिए addEventListenerजिनके द्वारा एक अलग एपीआई है।

चूंकि addEventListenerAPI html5 स्पेक (केवल on*ईवेंट हैंडलर) के तहत कवर नहीं किया गया है ... यदि वे on*अपने उदाहरणों में स्टाइल ईवेंट हैंडलर से चिपके रहते हैं तो यह कम भ्रामक होगा ।

Question 4

StopDefault, stopPropogation के बीच अंतर, गलत वापसी

तालिका अंतर दिखा रही है

डिफॉल्ट एक्शन - जब कंट्रोल इवेंट बढ़ाता है तो सर्वर साइड एक्शन।

मान लीजिए हमारे पास div control है और इसके अंदर हमारे पास एक बटन है। तो div बटन का मूल नियंत्रण है। हमारे पास क्लाइंट साइड क्लिक और सर्वर साइड बटन का इवेंट है। इसके अलावा हमारे पास डिव का क्लाइंट साइड क्लिक इवेंट है।

क्लाइंट साइड पर बटन के क्लिक इवेंट पर, हम तीन तरीकों का उपयोग करके पैरेंट कंट्रोल और सर्वर साइड कोड की क्रियाओं को नियंत्रित कर सकते हैं:

return false- यह केवल क्लाइंट साइड कंट्रोल की घटना की अनुमति देता है। पैरेंट कंट्रोल का सर्वर साइड इवेंट और क्लाइंट साइड इवेंट फायर नहीं किया जाता है।
preventDefault()- यह क्लाइंट साइड कंट्रोल की घटना और इसके अभिभावक नियंत्रण की अनुमति देता है। सर्वर साइड इवेंट यानी। नियंत्रण की डिफ़ॉल्ट कार्रवाई निकाल नहीं है।
stopPropogation()- यह क्लाइंट साइड के साथ-साथ कंट्रोल के सर्वर साइड इवेंट की भी अनुमति देता है। नियंत्रण का क्लाइंट साइड ईवेंट नहीं है।

Question 5

return falseसिर्फ IE के लिए है, event.preventDefault()क्रोम, एफएफ द्वारा समर्थित है ... आधुनिक ब्राउज़र