چرا 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 عصر

نوشته شده توسط 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 نکنید). نتیجه یکی هستش، اما عملا این دو روش تفاوتهایی با هم دارن...

نام تاپیک: چرا Click کردن روی Element درونی، باعث فراخوانی Click روی Element بیرونی میشه؟

ابزار های تاپیک

نمایش

چرا Click کردن روی Element درونی، باعث فراخوانی Click روی Element بیرونی میشه؟

نقل قول: یه مشکل با click

قوانین ایجاد تاپیک در تالار