ก่อนอื่นอธิบายความแตกต่างระหว่างสองวิธีของ preventDefault และการหยุดการ propagation ใน JS:
บทบาทของวิธี PreventDefault คืออะไร? เรารู้ตัวอย่างเช่น <a href = "http://www.baidu.com"> baidu </a> นี่เป็นสิ่งพื้นฐานที่สุดใน html .Baidu .. com นี่เป็นพฤติกรรมเริ่มต้นของฉลาก <a> และวิธี PreventDefault คือการป้องกันไม่ให้สิ่งอื่นเกิดขึ้นจากการเกิดพฤติกรรมเริ่มต้น ดูย่อหน้าของรหัสและทุกคนเข้าใจ:
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> js ป้องกันการกระโดดลิงก์ </title>
<script type = "text/javascript">
ฟังก์ชั่น stopdefault (e) {
ถ้า (e && e.preventdefault)
E.preventDefault ();
อื่น
window.event.returnvalue = false;
กลับเท็จ;
-
</script>
</head>
<body>
<a href = "http://www.baidu.com" id = "testlink"> baidu </a>
<script type = "text/javascript">
var test = document.getElementById ('testlink');
test.onclick = function (e) {{
การแจ้งเตือน ('ที่อยู่ลิงก์ของฉันคือ:' + this.href + 'แต่ฉันจะไม่กระโดด');
stopdefault (e);
-
</script>
</body>
</html>
ในเวลานี้คลิกที่ลิงค์ Baidu และคุณจะไม่เปิด http://www.baidu.com แต่เพียงแค่ปรากฏกล่องโต้ตอบการแจ้งเตือน
แล้ววิธีการหยุดยั้งล่ะ? ก่อนที่จะพูดคุยเกี่ยวกับวิธีการหยุดยั้งคุณต้องอธิบายตัวแทนเหตุการณ์ JS ให้คุณ
พร็อกซีเหตุการณ์ใช้คุณสมบัติสองอย่างที่มักจะถูกละเว้นในเหตุการณ์ Javasciprt: เหตุการณ์เดือดและองค์ประกอบเป้าหมาย เมื่อเหตุการณ์ในองค์ประกอบถูกทริกเกอร์ตัวอย่างเช่นเมาส์คลิกปุ่มและเหตุการณ์เดียวกันจะถูกทริกเกอร์ในบรรพบุรุษทั้งหมดขององค์ประกอบนั้น กระบวนการนี้เรียกว่าเหตุการณ์เดือด สำหรับเหตุการณ์ใด ๆ องค์ประกอบเป้าหมายของมันคือองค์ประกอบดั้งเดิมและในตัวอย่างของเรา แต่ยังเป็นปุ่ม องค์ประกอบเป้าหมายจะปรากฏในรูปแบบของแอตทริบิวต์ในวัตถุเหตุการณ์ของเรา หากคุณใช้เอเจนต์เหตุการณ์เราสามารถเพิ่มโปรเซสเซอร์กิจกรรมลงในองค์ประกอบรอกิจกรรมเพื่อฟองจากองค์ประกอบระดับย่อยและสามารถกำหนดองค์ประกอบที่เหตุการณ์เริ่มต้นได้อย่างง่ายดาย
วิธี stoppropagation คือการป้องกันไม่ให้เหตุการณ์ JS จากเดือดและดูรหัส
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">>
<head>
<title> ป้องกันการส่งฟองสบู่ของ JS (CancelBubble, stoppropagation) </title>
<meta name = "คำหลัก" content = "js, เหตุการณ์เดือด, cancelBubble, stoppropagation" />
<script>
ฟังก์ชั่น dosomething (obj, evt) {
การแจ้งเตือน (obj.id);
var e = (evt)?
if (window.event) {
E.CancelBubble = true;
} อื่น {
//e.preventdefault ();
E.StopPropagation ();
-
-
</script>
</head>
<body>
<div id = "parent1" onclick = "การแจ้งเตือน (this.id)">
<p> นี่คือความเจ็บปวด 1
<div id = "child1" onclick = "การแจ้งเตือน (this.id)">
<p> นี่คือ Child1
</div>
<p> นี่คือความเจ็บปวด 1
</div>
<br />
<div id = "parent2" onclick = "การแจ้งเตือน (this.id)">
<p> นี่คือ parent2 div
<div id = "child2" onclick = "dosomething (เหตุการณ์นี้);" >> ">
<p> นี่คือเด็ก
</div>
<p> นี่คือ parent2 div
</div>
</body>
</html>
มาเข้าใจรหัสข้างต้นกันเถอะ