Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में मल्टीपल div के लिए 'click' इवेंट के अंदर/बाहर कंडीशन कैसे बनाएं?


आप क्लिक के लिए इवेंट लिसनर का उपयोग कर सकते हैं।

उदाहरण

निम्नलिखित कोड है:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
    <div class="divDemo">
        First Division
    </div>
    <div class="divDemo">
        Second Division
    </div>
</body>
<script>
    document.addEventListener('click', callEventFuncion)
    function callEventFuncion(event) {
        var div = document.querySelectorAll('.divDemo');
        var titleResult = document.querySelectorAll('.my-title');
        var result = Array.apply(0, div).find((v) => v.contains(event.target));
        if (result) {
            console.log(" Incrementing Division Selection");
        }
        else {
            console.log("Incrementing Element Only OutSide of DIV");
        }
    }
</script>
</html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम "anyName.html(index.html)" सेव करें। फ़ाइल पर राइट-क्लिक करें और Visual Studio Code एडिटर में "Open with Live Server" विकल्प चुनें।

आउटपुट

यह कंसोल पर निम्नलिखित आउटपुट देगा:

JavaScript में मल्टीपल div के लिए  click  इवेंट के अंदर/बाहर कंडीशन कैसे बनाएं?

जब भी हम डिवीजन पर क्लिक करते हैं तो यह डिवीजन पार्ट को इन्क्रीमेंट करेगा अन्यथा यह डिवीजन के बाहर एलिमेंट को इन्क्रीमेंट करेगा।

केस 1

जब यूजर डिव सेक्शन पर क्लिक करता है। यहां, मैंने डिव सेक्शन पर दो बार क्लिक किया। स्नैपशॉट इस प्रकार है:

JavaScript में मल्टीपल div के लिए  click  इवेंट के अंदर/बाहर कंडीशन कैसे बनाएं?

कंसोल में आउटपुट:

JavaScript में मल्टीपल div के लिए  click  इवेंट के अंदर/बाहर कंडीशन कैसे बनाएं?

केस 2

अब, मैं डिव सेक्शन के बाहर सात बार क्लिक कर रहा हूं। स्नैपशॉट इस प्रकार है:

यह कंसोल में निम्नलिखित आउटपुट देगा:

JavaScript में मल्टीपल div के लिए  click  इवेंट के अंदर/बाहर कंडीशन कैसे बनाएं?


  1. जावास्क्रिप्ट में इवेंट बबलिंग बनाम इवेंट कैप्चरिंग जावास्क्रिप्ट में इवेंट बबलिंग बनाम इवेंट कैप्चरिंग

    इवेंट बबलिंग - जब भी किसी एलिमेंट पर कोई इवेंट होता है, तो इवेंट हैंडलर्स पहले उस पर चलेंगे, फिर उसके पैरेंट पर और अंत में सभी पूर्वजों तक। इवेंट कैप्चरिंग - यह इवेंट बबलिंग का उल्टा है और यहां इवेंट पैरेंट एलिमेंट से शुरू होकर चाइल्ड एलिमेंट तक जाता है। जावास्क्रिप्ट में इवेंट बबलिंग बनाम इवेंट कै

  1. जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना

    मान लीजिए निम्नलिखित हमारा डिव है - Welcome in JavaScript निम्नलिखित हमारा बटन है। क्लिक करने पर, उपरोक्त डिव छिप जाना चाहिए -Click The Buttonडिव को छिपाने के लिए जावास्क्रिप्ट में style.display अवधारणा का उपयोग करें। कोड निम्नलिखित है -उदाहरण  Document Click The Button Welcome in Jav

  1. JavaScript में बटन क्लिक पर टेक्स्ट फील्ड को खाली कैसे करें? JavaScript में बटन क्लिक पर टेक्स्ट फील्ड को खाली कैसे करें?

    उदाहरण onclick इवेंट और value = से टेक्स्ट फील्ड क्लियर करें। <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> </head> <body> <input