Mouse Events
In this page:
$(selector).click(function () {
// code
});
$(selector).dblclick(handler);
$(selector).mouseenter(handler);
$(selector).mouseleave(handler);Click
click event में एक handler bind करना user के उस element पर mouse button दबाने और छोड़ने के instant आपका function चला देता है।
उदाहरण: Click
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() {
console.log("Clicked");
});
</script>
</body>
</html>Double Click
dblclick event सिर्फ तभी fire होता है जब दो clicks जल्दी succession में register हों -- अकेला single click इसे trigger नहीं करेगा, जो इसे उन actions के लिए उपयोगी बनाता है जिन्हें आप accidental single clicks से guard करना चाहते हैं।
उदाहरण: Double Click
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Double-click</button>
<script>
$("#btn").on("dblclick", function() {
console.log("Double clicked");
});
</script>
</body>
</html>Mouse Down और Up
mousedown उस moment fire होता है जब button दबाया जाता है, और mouseup तब fire होता है जब इसे release किया जाता है -- click को दो अलग events में split करना आपको custom drag या press-and-hold interactions बनाने देता है।
उदाहरण: Mouse Down and Up
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Press and hold</button>
<script>
$("#btn").on("mousedown", function() {
console.log("Button pressed");
});
$("#btn").on("mouseup", function() {
console.log("Button released");
});
</script>
</body>
</html>Mouse Enter और Leave
mouseenter एक बार fire होता है जब pointer किसी element की boundary में crosses करता है, और mouseleave एक बार fire होता है जब यह बाहर जाता है -- mouseover/mouseout के उलट, वे अंदर के child elements के लिए दोबारा fire नहीं होते।
उदाहरण: Mouse Enter and Leave
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover me</div>
<script>
$("#box").on("mouseenter", function() {
console.log("Entered");
});
$("#box").on("mouseleave", function() {
console.log("Left");
});
</script>
</body>
</html>Mouse Move
mousemove बार-बार fire होता है, प्रति second कई बार, जब तक pointer element के ऊपर रहता है -- cursor position track करने के लिए उपयोगी लेकिन अगर handler भारी काम करता है तो costly।
उदाहरण: Mouse Move
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Move mouse here</div>
<script>
$("#box").on("mousemove", function(event) {
console.log(event.pageX, event.pageY);
});
</script>
</body>
</html>- यह उम्मीद करना कि user के एक बार click करने पर
dblclickचलेगा; यह सिर्फ दो जल्दी clicks के बाद fire होता है, और उसी element पर एक single-click handler भी दोनों clicks के लिए fire होता है। - किसी parent पर
mouseoverऔरmouseoutइस्तेमाल करना और pointer के child elements में crossing करने पर repeated firing पाना, जहाँmouseenterऔरmouseleaveएक बार fire होते हैं। - यह भूल जाना कि
mousedownmouseupऔरclickसे पहले fire होता है, इसलिए वहाँ भारी logic चलाना user के click पूरा करने से पहले चल सकता है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: