滑动格板可追溯到上点击DIV面板按钮内

我使用这个代码，以我的DIV从右上（button_panel）按钮，单击幻灯片，一切工作正常，但是当我点击DIV面板中的任何按钮面板追溯到它的原始位置。它不应该发生，因为click事件仅用于button_panel。任何想法为什么？滑动格板可追溯到上点击DIV面板按钮内

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>

来源

2012-04-09 A.J

你可以发布HTML片段也好吗？ – JonVD 2012-04-09 22:59:30

你的按钮触发一个点击所有的父元素，包括面板。换句话说，事件通过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如果您使用的链接。或者，如果你有两个事情：

演示：http://jsfiddle.net/jtbowden/RDKn6/

来源

2012-04-09 23:03:20

我已经尝试过了，它不工作。我认为这与回发有关。你怎么看？ – 2012-04-09 23:13:38

对不起，我的原代码是错误的。我脑海中倒退了。您是否在我最近的编辑中尝试了代码，在按钮中添加了单独的处理程序？看我的演示代码。它也将有助于查看您的HTML。 – 2012-04-09 23:19:02

我谈论的是我已经把，如果我按他们的DIV面板内的其他按键面板返回。我试图用这些按钮单击返回false，它的工作原理，但它不会执行点击功能。比方说，如果我想提出退出按钮在面板上，如果我把返回的单击事件为假，则该按钮不起任何作用。 – 2012-04-09 23:30:57

滑动格板可追溯到上点击DIV面板按钮内

回答

相关问题