使用javascript停止鼠標雙擊某些元素

Question

當用戶單擊圖像或箭頭時，我有一個帶有滑動圖像的小型導航菜單。 通過使用.5s css過渡在png圖像文件上更改其背景位置，可以滑動圖像。

當用戶單擊菜單時，我抓住元素的x位置並遞增它。 完成此過程需要0.5秒鍾，因此，如果用戶在圖像移動時雙擊，則通過兩次更改將使CSS位置混亂。

我認為最好的解決方案是讓用戶避免在.5s內雙擊這些按鈕，有沒有辦法做到這一點？

以下是JS的相關摘錄

    function getXAxis (div, val){
        var x_axis = div.css("background-position");
        x_axis = x_axis.split("px");
        x_axis = x_axis[0];
        x_axis = parseInt(x_axis);
        x_axis = x_axis + val;
        return x_axis;
    }

    function rotateControlsRight(){
        x = getXAxis(hpLeftArrow, 9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, 57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, 65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, 57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, 9);
        hpRightArrow.css("background-position", x+"px -15px");
        console.log("moving RIGHT by "+x);

    }

    function rotateControlsLeft(){
        x = getXAxis(hpLeftArrow, -9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, -57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, -65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, -57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, -9);
        hpRightArrow.css("background-position", x+"px -15px");
        console.log("moving Left by "+x);

    }


    hpLeftArrow.click(function(){
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide()

    });

    hpRightArrow.click(function(){
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide()
    });

Answer 1

我可以建議您聲明一些“進行中”標志嗎？ 例如，在onclick處理程序中設置一些全局變量，並在動畫結束時將其重置。

Answer 2

最好的方法是檢查元素是否正在設置動畫，如果是，則跳過該函數：

var leftCheck=false;
hpLeftArrow.click(function(){
    if(!leftCheck){
        leftCheck=true;
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide();
        setTimeout(function(){
            leftCheck=false;
        },500);
    }
    });
    var rightCheck=false;
    hpRightArrow.click(function(){
      if(!rightCheck){
        rightCheck=true;
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide();
        setTimeout(function(){
            rightCheck=false;
        },500);
      }
    });

Answer 3

您可以定義一個變量，該變量指示運動（左或右）狀態是否完成。

var motionComplete = true;

hpLeftArrow.click(function(){
       if(motionComplete) // check complete or not
      {
        motionComplete = false;// set motion started
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition > 1 ){
            -- hpSlidePosition;
        } else {
            hpSlidePosition = 1;
        }
        hpMovingRight = false;
        rotateControlsLeft();

        hpInitSlide(); // you missed semicolon here
        motionComplete = true;// set motion complete
      }
    });

    hpRightArrow.click(function(){
     if(motionComplete)// check complete or not
      {
        motionComplete = false;// set motion started
        checkForChange = hpSlidePosition;
        hpPrevPosition = hpSlidePosition;
        if (hpSlidePosition < 3 ){
            ++ hpSlidePosition;
        } else {
            hpSlidePosition = 3;
        }
        hpMovingRight = true;
        rotateControlsRight();

        hpInitSlide(); // you missed semicolon here
        motionComplete = true;// set motion complete
      }
    });

Answer 4

方法1：我對此不太確定，但應該可以。 處理單擊的處理程序檢查event.type。

如果event.type ==“ dblclick”
然后返回

方法2：像我之前的人一樣回答。 啟用一個標志，然后在動畫完成后將其禁用。 據我所知，有一個指示動畫已完成的回調，或者可能是一個jQuery回調

方法3：當您將點擊事件注冊到一個className時，說class =“ slideOnClick”，即$（document）.on（“ click”，“。slideOnClick”，handler）; 記住不要使用$（“。slideOnClick”）。on（“ click”）; 開始動畫后，刪除className，完成動畫后，添加回className。 這樣，當用戶確實雙擊第一次單擊時會生成動畫，而第二次單擊直到動畫完成並且重新添加className時才會生成動畫。

方法4：在要設置動畫的元素上具有data- *屬性。 說data-animationState =“ idle” /“ progress” /“ complete”。 並且僅在data-animationState！=“ progress”時應用動畫

方法5：與方法3相似，但無需更改單擊的元素的className，而是更改要進行動畫處理的元素的className，即將動畫應用於class =“ animateElement”，並在進行時將其更改為class =“ animateElementInProgress”，並在完成后將其更改為class =“ animateElementInProgress”將其更改回class =“ animateElement”

Answer 5

感謝您的所有幫助，最后，我使用了一個變量來存儲幻燈片的狀態，如果該幻燈片處於活動狀態，則將其值設置為true，然后在0.5s后將其設置為false。

var rotateFlag = false;
function rotateControlsLeft(){
    if(!rotateFlag){
        x = getXAxis(hpLeftArrow, -9);
        hpLeftArrow.css("background-position", x+"px 0px");
        x = getXAxis(hpPosition1, -57);
        hpPosition1.css("background-position", x+"px -2px");
        x = getXAxis(hpPosition2, -65);
        hpPosition2.css("background-position", x+"px -1px");
        x = getXAxis(hpPosition3, -57);
        hpPosition3.css("background-position", x+"px -2px");
        x = getXAxis(hpRightArrow, -9);
        hpRightArrow.css("background-position", x+"px -15px");
        rotateFlag = true;
        setTimeout(function(){
            rotateFlag=false;
        },500);
    }