ผู้คนมักจะใช้เมาส์ในการใช้งานเว็บเพื่อไปคลิกหรือเลือกตำแหน่งๆ ซึ่งเราควรมีฟังก์ชันการทำงานต่างๆเมื่อมีการคลิกที่ตำแหน่งนั้นๆเกิดขึ้น ซึ่งมีทั้งคลิกหนึ่งครั้ง สองครั้ง และมากกว่านั้น เพื่อความสะดวกในการใช้งานและเป็นที่น่าสนใจมากขึ้น บทความจะนำเสนอ เมธอด dblClick() นั้นก็คือ ดับเบิ้ลคลิกนั้นเอง
dblClick () เป็นเมธอด ที่ inbuilt ใน jQuery ที่ใช้ในการก่อให้เกิดเหตุการณ์คลิกสองครั้งที่จะเกิดขึ้น
เมธอดจะเกิดขึ้นเมื่อองค์ประกอบที่เลือกจะถูกดับเบิลคลิก
รูปแบบ Syntax
$(selector).dblclick(args);
“ selector” ในที่นี้เป็นองค์ประกอบที่เลือก
- พารามิเตอร์: มันจะรับพารามิเตอร์ “ args” ซึ่งระบุฟังก์ชั่นที่ทำงานเฉพาะหลังจากคลิกสองครั้ง
- Return Value: จะส่งคืนฟังก์ชั่นบางอย่างเมื่อองค์ประกอบที่เลือกถูกดับเบิลคลิก
ตัวอย่างโค้ด Jquery และ HTML ดังนี้
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
<!-- jQuery code to show dbclick method -->
$(document).ready(function() {
$("button").dblclick(function() {
$("p").fadeOut();
});
});
</script>
<style>
p {
display: block;
padding: 20px;
color: gree;
width: 300px;
border: 2px solid green;
font-size: 25px;
}
</style>
</head>
<body>
<p>Welcome to Mindphp !</p>
<!-- click on this button and above paragraph will disappear -->
<button>Double Click Me! </button>
</body>
</html>
ผลลัพธ์เมื่อเปิดผ่านWeb browser ผลลัพธ์เมื่อเปิดผ่านเบราเซอร์
เมื่อเรากดคลิกสองครั้งที่ปุ่ม
เราได้กำหนดในโค้ดไว้ว่า เมื่อมีการกดปุ่มสองครั้ง ข้อความ Mindphp ด้านบนจะหายไป ก็เป็นไปตามผลลัพธ์อย่างที่เห็นครับ นี้เป็นตัวอย่างคร่าวๆ ลองนำไปต่อยอดดูน่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery