滑動格板可追溯到上點擊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面板按鈕內

回答

相關問題