اشرح أولاً الفرق بين طريقتي PrevEfault و Stoppropagation في 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 منع الارتباط Jumping </title>
<script type = "text/javaScript">
وظيفة stopDefault (e) {
if (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: فقاعات الأحداث والعناصر المستهدفة. عندما يتم تشغيل حدث على عنصر ما ، على سبيل المثال ، ينقر الماوس على زر ، وسيتم تشغيل الحدث نفسه في جميع أسلاف هذا العنصر. وتسمى هذه العملية فقاعة الحادث. لأي حدث ، فإن عناصرها المستهدفة هي عناصر بدائية ، وفي مثالنا ، ولكن أيضًا الزر. يظهر العنصر الهدف في شكل سمات في كائنات الأحداث الخاصة بنا. إذا كنت تستخدم وكيل الأحداث ، فيمكننا إضافة معالج الأحداث إلى عنصر ما ، وانتظر الحدث إلى فقاعة من عناصره الفرعية ، ويمكننا تحديد العنصر الذي يبدأ منه الحدث بسهولة.
تتمثل طريقة التوقف في منع حدث JS من الفقاعات ومشاهدة رمز.
نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<head>
<title> منع انتقال فقاعة الحوادث (CancelBubble ، stopPropagation) </title>
<meta name = "Keywords" content = "js ، event bubling ، cancelbubble ، stoppropagation" />
<script>
وظيفة dosomething (obj ، evt) {
تنبيه (obj.id) ؛
var e = (evt)؟
if (window.event) {
e.cancelbble = true ؛
} آخر {
//e.preventDefault () ؛
E.Stoppropagation () ؛
}
}
</script>
</head>
<body>
<div id = "parent1" onClick = "Alert (this.id)">
<p> هذا هو Pain1 Div
<div id = "child1" onClick = "Alert (this.id)">
<p> هذا هو الطفل 1
</div>
<p> هذا هو Pain1 Div
</div>
<br />
<div id = "parent2" onClick = "Alert (this.id)">
<p> هذا هو Parent2 Div
<div id = "child2" onClick = "dosomething (هذا ، الحدث) ؛" >> ">
<p> هذا هو الطفل
</div>
<p> هذا هو Parent2 Div
</div>
</body>
</html>
دعونا نفهم الرمز أعلاه.