div 패널을 다시 누르면 div 패널 내부의 버튼을 클릭합니다.

Question

이 코드를 사용하여 오른쪽에서 div를 슬라이드 (button_panel) 버튼을 클릭하면 모든 것이 올바르게 작동하지만 div 패널 내부의 버튼을 클릭하면 패널로 돌아갑니다. 원래 위치. 그것은 click 이벤트가 button_panel에 대해서만 사용되기 때문에 발생하지 않아야합니다. 왜 그런가?

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

버튼은 패널을 포함하여 모든 상위 요소에 클릭을 발생시킵니다. 다시 말해서, 이벤트는 DOM 트리를 통해 거품을 일으 킵니다.

당신은 당신의 버튼에 대한 핸들러에서 e.stopPropagation()을 수행해야합니다

$(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 
    }); 
}); 

가정은 당신이 실제로 button 요소를 가지고있다. 그렇지 않으면 링크를 사용하는 경우 a을 입력하십시오. 또는 당신이있는 경우에 모두 수행

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

데모 : http://jsfiddle.net/jtbowden/RDKn6/