چرا Click کردن روی Element درونی، باعث فراخوانی Click روی Element بیرونی میشه؟
سلام
این کد رو نگاه کنید :
<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(آبی) فراخونی بشه ؟
نقل قول: یه مشکل با click
نقل قول:
نوشته شده توسط
gigil_Question
سلام این کد رو نگاه کنید : مشکل اینجاست که وقتی روی ناحیه آبی کلیک میشه هم رویداد کلیک برای 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 نکنید). نتیجه یکی هستش، اما عملا این دو روش تفاوتهایی با هم دارن...
