การอ่านที่เกี่ยวข้อง:
JavaScript เหตุการณ์สรุปการเรียนรู้ (V) ประเภทเหตุการณ์เมาส์ใน JS
//www.vevb.com/article/86259.htm
สรุปเหตุการณ์ JavaScript การเรียนรู้ (i) เหตุการณ์เหตุการณ์
//www.vevb.com/article/86261.htm
สรุปเหตุการณ์การเรียนรู้ JavaScript (IV) สมาชิกสาธารณะของเหตุการณ์ (คุณสมบัติและวิธีการ)
//www.vevb.com/article/86262.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (iii) วัตถุเหตุการณ์ JS
เหตุการณ์เมาส์
9 เหตุการณ์เมาส์ถูกกำหนดไว้ในเหตุการณ์ระดับ DOM3
Mousedown: ทริกเกอร์เมื่อกดปุ่มเมาส์ (ซ้ายหรือขวา)
ไม่สามารถเรียกใช้คีย์บอร์ดได้
Mouseup: ทริกเกอร์เมื่อปุ่มเมาส์ถูกปล่อยออกมาและปรากฏขึ้น
ไม่สามารถเรียกใช้คีย์บอร์ดได้
คลิก: ทริกเกอร์เมื่อคลิกปุ่มซ้ายของเมาส์หรือกดปุ่ม Enter นี่เป็นสิ่งสำคัญสำหรับการสร้างความมั่นใจว่าการเข้าถึงซึ่งหมายความว่าตัวจัดการเหตุการณ์ onclick สามารถดำเนินการได้ทั้งผ่านแป้นพิมพ์และผ่านเมาส์ dblclick: ทริกเกอร์เมื่อปุ่มซ้ายเมาส์ดับเบิลคลิก MouseOver: เลื่อนเมาส์ไปที่องค์ประกอบเป้าหมาย สิ่งนี้จะยิงเมื่อเมาส์เคลื่อนที่ผ่านองค์ประกอบของลูกหลาน Mouseout: เมาส์ลบองค์ประกอบเป้าหมายข้างต้น
Mouseenter: เมาส์เคลื่อนเข้าสู่ช่วงขององค์ประกอบและกระตุ้นเหตุการณ์ซึ่งไม่ได้ฟองนั่นคือมันจะไม่กระตุ้นเมื่อเมาส์เคลื่อนที่ไปยังองค์ประกอบของลูกหลาน
Mouseleave: ถูกกระตุ้นเมื่อเมาส์เคลื่อนตัวออกจากช่วงองค์ประกอบและเหตุการณ์ไม่ได้เป็นฟองนั่นคือมันจะไม่กระตุ้นเมื่อเมาส์เคลื่อนที่ไปยังองค์ประกอบของลูกหลาน
Mousemove: เมาส์ถูกกระตุ้นอย่างต่อเนื่องเมื่อมันเคลื่อนที่ภายในองค์ประกอบ
ไม่สามารถเรียกใช้คีย์บอร์ดได้
บันทึก:
เหตุการณ์ Mousedown และ Mouseup จะถูกเรียกอย่างต่อเนื่องในองค์ประกอบเพื่อเรียกเหตุการณ์การคลิก เหตุการณ์ DBLCLICK จะถูกเรียกใช้เฉพาะเมื่อเหตุการณ์คลิกสองครั้งถูกยิงหลังจากเกิดเหตุการณ์อีกครั้ง
หากหนึ่งใน Mousedown หรือ Mouseup ถูกยกเลิกเหตุการณ์การคลิกจะไม่ถูกเรียกใช้ หากเหตุการณ์การคลิกถูกยกเลิกโดยตรงหรือโดยอ้อมเหตุการณ์ DBLCLICK จะไม่ถูกเรียกใช้
1. คำสั่งของเหตุการณ์ทริกเกอร์
ตัวอย่างเช่น: ดับเบิลคลิกที่ปุ่มและดูเหตุการณ์ที่ทริกเกอร์ด้านบน
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("mousedown", ฟังก์ชั่น (เหตุการณ์) {console.log ("mousedown");}, false); btn.addeventListener ("mouseup", function () {console.log ("mouseup");}, false); btn.addeventListener ("คลิก", function () {console.log ("คลิก");}, false); btn.addeventListener ("dblclick", function () {console.log ("dblclick");}, false); </script> </body>2. ความแตกต่างระหว่าง Mouseenter และ Mouseover
ความแตกต่าง:
เหตุการณ์ Mouseover จะฟองซึ่งหมายความว่ามันจะยิงเมื่อเมาส์เคลื่อนไปยังองค์ประกอบของลูกหลาน
เหตุการณ์ Mouseenter ไม่ได้เป็นฟองซึ่งหมายความว่าเมาส์จะไม่ยิงเมื่อมันย้ายไปยังองค์ประกอบที่สืบเชื้อสาย
ตัวอย่างเช่น:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #OUTER {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 200px; ความสูง: 200px; ด้านบน: 0; ซ้าย: 0; ด้านล่าง: 0; ขวา: 0; มาร์จิ้น: อัตโนมัติ; พื้นหลังสี: สีชมพู; } #inner {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; ความสูง: 100px; ด้านบน: 50%; ซ้าย: 50%; ขอบซ้าย: -50px; พื้นหลังสี: ส้ม; TEXT-ALIGN: CENTER; ความสูงของสาย: 100px; } #outer, #inner {Border-Radius: 50%; } </style> <script src = "jQuery-2.1.1.min.js"> </script> </head> <body> <body> <body> <div id = "outer"> <div id = "inner"> </div> </div> </body> {console.log ("เหตุการณ์ mouseover ของ parent div ถูกเรียกใช้");}, false); // parentdiv.addeventListener ("mouseenter", ฟังก์ชั่น () {// console.log ("เหตุการณ์ mouseenter ของผู้ปกครอง {// console.log ("เหตุการณ์ mouseout ของ parent div ถูกเรียกใช้"); //}, false); // parentdiv.addeventListener ("mouseleave", ฟังก์ชั่น () {// console.log ("เหตุการณ์ Mouseleave ของผู้ปกครองบันทึก:
Mouseover สอดคล้องกับ Mouseout, Mouseenter สอดคล้องกับ Mouseleave เอฟเฟกต์สามารถไม่รู้สึกตัวในรหัสข้างต้น
Hover API ใน jQuery ผสมผสาน Mouseenter และ Mouseleave เข้ากับการใช้งาน
3. ปุ่มเมาส์ซ้ายและขวา
<script type = "text/javascript"> document.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; การแจ้งเตือน (oevent.button); // ปุ่มเมาส์ซ้ายใน IE คือ 1 ปุ่มเมาส์ขวาคือ 2 และปุ่มเมาส์ซ้ายใน FF และปุ่มเมาส์ขวาใน Chrome คือ 0 ปุ่มเมาส์ขวาคือ 2}; </script>4. ความแตกต่างระหว่าง Mouseover และ Mousemove
โดยทั่วไปแล้ว Mouseover ก็เพียงพอแล้ว แต่ Mousemove ใช้ในสถานการณ์พิเศษเท่านั้น Mousemove ใช้ทรัพยากรมากขึ้นเช่นการตรวจสอบการเปลี่ยนแปลงในพิกัดของเมาส์
ข้างต้นคือสรุปการเรียนรู้เหตุการณ์ JavaScript ที่แนะนำให้คุณรู้จักโดยความรู้ที่เกี่ยวข้องกับบรรณาธิการ (V) เกี่ยวกับเหตุการณ์เมาส์ของประเภทเหตุการณ์ใน JS ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!