同時運行HTML / JSF / JQuery的鏈接和Div腳本

Question

我正在做一個項目，要求我有一個div，其中將包含一些要編輯的項目，以及另一個div，該div不會一直顯示。 該代碼如下所示：

<div id="div1">
    <h:outputText value="Fixed Div" />
    <h:outputLink id="openDiv">Open Div</h:outputLink>
    <div id="currentlyUnused">TODO</div>
</div>

<div id="div2">
    <h:outputText value="Other Div" />
    <div id="currentlyUnused2">TODO</div>
</div>

兩個div的一些其他CSS：

width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
background-color: white;

還為div2添加：

z-index: 10;
display: none;

因此，我正在嘗試單擊div1的鏈接時打開div2 。 我曾經通過使用JQuery腳本來發生這種情況。 腳本如下所示：

<script>
    $("#openDiv").click(function() {
        $("#div2").show( "slow" );
        $("#div1").animate({
            'marginLeft' : "-=30px"
        });
        $("#div1").animate({
            'marginTop' : "-=20px"
        });
    });
</script>

<script>
    $("#div1").click(function() {
        $("#div2").hide( "slow" );
        $("#div1").animate({
            'marginLeft' : "+=30px"
        });
        $("#div1").animate({
            'marginTop' : "+=20px"
        });
    });
</script>

關閉div2方法與此類似，不同之處在於，當單擊div1 （突出在側面）時div2將關閉。 它們周圍有邊界，所以我可以確切地看到它們的移動方式等，但是這僅與樣式相關，以及div2上的z-index（使其重疊等）

不過要解決當前的問題。 由於div是動態動畫，因此我注意到屏幕上的運動，並且知道如何移動div。 當div2在屏幕中間彈出時， div1將向上移動20px，向左移動30px。 當div2關閉時， div1將向下移動20px，向右移動30px（移至原始位置）

我注意到，當我單擊鏈接打開div2 ，將發生以下步驟：

1. div1向左移動30px
2. div1向上移動20px
3. div2短暫打開
4. div2關閉
5. div1向右移動30px
6. div1下移20px

這使我相信單擊鏈接時兩個腳本都在運行。 我能想到的唯一可能的原因是，鏈接和div上的click腳本是同時觸發的。

我一直在嘗試如何解決這個問題的不同組合。 我也嘗試過使用pointer-events來嘗試解決問題，但到目前為止沒有任何效果。

任何建議或幫助將不勝感激

Answer 1

問題在於該按鈕處於表單中，並且都具有一個jQuery oncklick。 查詢將保留對按鈕的單擊作為對div1的單擊。

要解決此問題（event.stoppropagation），請執行以下操作： https ://api.jquery.com/event.stoppropagation/

<script>
    $("#openDiv").click(function( event ) {
        //Prevent click flowing into div1
        event.stopPropagation();
        $("#div2").show( "slow" );
        $("#div1").animate({
            'marginLeft' : "-=30px"
        });
        $("#div1").animate({
            'marginTop' : "-=20px"
        });
    });
</script>