سوال: چرا Click کردن روی Element درونی، باعث فراخوانی Click روی Element بیرونی میشه؟ [بایگانی]

gigil_Question

سه شنبه 22 تیر 1389, 18:01 عصر

سلام
این کد رو نگاه کنید :

<head runat="server">
<title>Untitled Page</title>

<script src="JS/jq.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function (){
$("#main").click(function(){ alert("main")});
$("#li").click(function(){alert("li")});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 500px; height: 500px; background-color: Red" id="main">
<div style="width: 300px; height: 300px; background-color: Blue" id="li">
</div>
</div>
</form>
</body>

مشکل اینجاست که وقتی روی ناحیه آبی کلیک میشه هم رویداد کلیک برای main و هم برای li فراخونی میشه:ناراحت:
چی کار کنم که این رویداد فقط برای ناحیه ای که روش کلیک شده یعنی li(آبی) فراخونی بشه ؟

mehdi.mousavi

سه شنبه 22 تیر 1389, 18:42 عصر

سلام این کد رو نگاه کنید : مشکل اینجاست که وقتی روی ناحیه آبی کلیک میشه هم رویداد کلیک برای main و هم برای li فراخونی میشه:ناراحت:
چی کار کنم که این رویداد فقط برای ناحیه ای که روش کلیک شده یعنی li(آبی) فراخونی بشه ؟

سلام.
کافیه کدتون رو یه این شکل تغییر بدید:

$(document).ready(function () {
$("#main").click(function () {
alert("main");
});

$("#li").click(function (e) {
alert("li");
e.stopPropagation();
});
});

به این ترتیب، جلوی bubble شدن event رو هنگام Click روی li می گیرید و دیگه main فراخوانی نمیشه.

موفق باشید.

Update: اینو بگم که می تونید در درون متود click بسادگی return false کنید، (به بیان دیگه، stopPropagation رو call نکنید). نتیجه یکی هستش، اما عملا این دو روش تفاوتهایی با هم دارن...