Schiebe div panel geht zurück auf klick buttons in div panel

Question

Ich benutze diesen code um meine div von rechts auf (button_panel) button click, alles funktioniert gut, aber wenn ich auf eine taste innerhalb div panel geht das panel zurück zu seine ursprüngliche Position. Es sollte nicht passieren, da das click -Ereignis nur für button_panel verwendet wird. Irgendeine Idee warum?

var sipPos = 0; 
$(document).ready(function() { 
    $("#button_panel").click(function (e) { 
     e.preventDefault(); 
     $("#panel").animate({ right: sipPos }, 300, 'linear', function() { 
      if (sipPos == 0) { sipPos = -150; } 
      else { sipPos = 0; } 
     }); 
    }); 
}); 

<div id="panel" style=" border-style: solid; border-color: #008000; background-color:#D5FFD5; width:150px; height:400px; right:-150px; top:142px; position:absolute" align="center" > 
    <asp:ImageButton ID="button_panel" runat="server" style=" background-image: url('images/ProgressBar1.jpg'); width:80px; height:30px; left:-83px; margin-top:-12px; position:absolute; top:0px" Font-Bold="True" ImageUrl="~/images/green_left_arrow_104.jpg" /> 
    <asp:Label ID="Label6" runat="server" style="margin-top:5px" Text="Timer" /><br /> 
    <asp:Button ID="Button1" runat="server" style="margin-top:5px" Text="AFK!" /><br /> 
    <asp:Button ID="Button2" runat="server" style="margin-top:5px" Text="REVIEW" /><br /> 
</div> 

Answer 1

Ihre Schaltflächen klicken auf alle übergeordneten Elemente, einschließlich der Anzeige, mit einem Klick. Mit anderen Worten, Ereignisse sprudeln durch den DOM-Baum.

Sie benötigen für Ihre Buttons e.stopPropagation() in einem Handler zu tun:

$(document).ready(function() { 
    $("#button_panel").click(function (e) { 
     e.preventDefault(); 

     $("#panel").animate({ right: sipPos }, 300, 'linear', function() { 
      if (sipPos == 0) { sipPos = -150; } 
      else { sipPos = 0; } 
     }); 
    }); 

    $("#button_panel button").click(function (e) { 
     e.stopPropagation(); // ADD THIS 
    }); 
}); 

Die Annahme ist, dass Sie button Elemente tatsächlich haben. Andernfalls setzen Sie a, wenn Sie Links verwenden. Oder wenn Sie beides:

$("#button_panel button,a").click(function (e) { 
    e.stopPropagation(); 
}); 

Demo: http://jsfiddle.net/jtbowden/RDKn6/