आप क्लिक के लिए ईवेंट श्रोताओं का उपयोग कर सकते हैं।
उदाहरण
निम्नलिखित कोड है -
<!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)" को सेव करें। फ़ाइल पर राइट क्लिक करें और विजुअल स्टूडियो कोड एडिटर में "ओपन विद लाइव सर्वर" विकल्प चुनें।
आउटपुट
यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -
जब भी हम डिवीज़न पर क्लिक करेंगे तो यह डिवीज़न वाले हिस्से को बढ़ा देगा अन्यथा यह डिवीज़न के बाहर इंक्रीमेंट करेगा।
केस 1
जब उपयोगकर्ता div अनुभाग पर क्लिक करता है। यहां, मैंने डिव सेक्शन पर दो बार क्लिक किया है। स्नैपशॉट इस प्रकार है -
कंसोल में आउटपुट -
केस 2
अब, मैं डिव सेक्शन के बाहर सात बार क्लिक कर रहा हूं। स्नैपशॉट इस प्रकार है -
यह कंसोल में निम्न आउटपुट उत्पन्न करेगा -
