บทความนี้อธิบายวิธีการคลิกร่วมกันและดับเบิลคลิกใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ในกระบวนการพัฒนาเว็บเรามักจะพบปัญหานี้: ลงทะเบียนเหตุการณ์ดับเบิลคลิกสำหรับลิงค์หรือลงทะเบียนเหตุการณ์คลิกหรือคลิกสองครั้งบนปุ่มหรือองค์ประกอบอื่น ๆ ในเวลาเดียวกัน ในเวลานี้เราพบว่าเหตุการณ์ดับเบิลคลิกในหน้าเว็บจะไม่ทำงาน เหตุผลก็คือเมื่อเราคลิกหนึ่งครั้งมันจะถูกสกัดกั้นโดยการเชื่อมโยงหลายมิติหรือเหตุการณ์คลิก บทความนี้อธิบายวิธีการเฉพาะของวิธีการแก้ปัญหาทางเทคนิคนี้ หลักการใช้งานของโซลูชันนี้คือทั้งเหตุการณ์คลิกและเหตุการณ์ดับเบิลคลิกที่วิธีการเดียวกัน เราตัดสินว่าเป็นเหตุการณ์คลิกหรือดับเบิลคลิกตามช่วงเวลาระหว่างการคลิกเมาส์สองครั้ง เมื่อเหตุการณ์คลิกมาก่อนอย่าเรียกมันก่อนรอเป็นระยะเวลาสั้น ๆ หลังจากช่วงเวลานี้หากไม่มีการคลิกครั้งต่อไปให้เริ่มเรียกการดำเนินการที่สอดคล้องกันของการคลิก หากมีการคลิกครั้งต่อไปโทรดับเบิลคลิก
สำหรับคำอธิบายโดยละเอียดโปรดเข้าร่วมในรายการรหัสต่อไปนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> JavaScript ตระหนักดีว่าคลิกและดับเบิลคลิกอยู่ร่วมกัน </tite>
<meta name = "generator" content = "EditPlus">
<meta name = "ผู้เขียน" content = "//www.vevb.com/">
<meta name = "คำหลัก" content = "">
<meta name = "คำอธิบาย" content = "">
</head>
<body>
<ภาษาสคริปต์ = "JavaScript">
-
var dctime = 250; // เวลา doubleclick
var dcdelay = 100; // ไม่มีการคลิกหลังจาก doubleclick
var dcat = 0; // เวลาของ doubleclick
var saveVent = null; // บันทึกเหตุการณ์สำหรับการจัดการ doclick ()
var savevttime = 0; // บันทึกเหตุการณ์เวลาคลิก
var savto = null; // ที่จับของคลิก setTimeout
ฟังก์ชั่น showme (txt) {
document.forms [0] .Elements [0] .Value += txt;
-
ฟังก์ชั่นมือจับ (ซึ่ง) {
สลับ (ซึ่ง) {
กรณี "คลิก":
SaveVent = ไหน;
d = วันที่ใหม่ ();
SaveVtTime = d.getTime ();
savto = settimeout ("doclick (savevent)", dctime);
หยุดพัก;
กรณี "dblclick":
Dodoubleclick (ซึ่ง);
หยุดพัก;
ค่าเริ่มต้น:
-
-
ฟังก์ชั่น doclick (ซึ่ง) {
if (saveVttime - dcat <= 0) {
กลับเท็จ;
-
showme ("คลิก");
-
ฟังก์ชั่น dodoubleclick (ซึ่ง) {
var d = วันที่ใหม่ ();
dcat = d.getTime ();
ถ้า (savto! = null) {
savto = null;
-
showme ("ดับเบิลคลิก");
-
-
</script>
<p>
<a href = "JavaScript: void (0)"
onclick = "handlewisely (event.type)"
ondblClick = "handlewisely (event.type)"
Style = "Color: Blue; Font-Family: Arial; Cursor: Hand">
คลิกเพื่อดูผลลัพธ์:
</a>
</p>
<form>
<table>
<tr>
<td valign = "top">
โหมดเหตุการณ์: <textarea rows = "4" cols = "60" wrap = "soft"> </textarea>
</td>
</tr>
<tr>
<td valign = "top">
<อินพุต type = "รีเซ็ต">
</td>
</tr>
</table>
</form>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน