停止鼠标用javascript双击某些元素

I have a small navigation menu with sliding images when the user clicks on the image or an arrow. The images slide by changing their background position over a png image file with a .5s css transition.

当用户点击图像或箭头时,我有一个带滑动图像的小导航菜单。通过使用.5s css转换在png图像文件上更改其背景位置来滑动图像。

When a user clicks on the menu, I grab the x postion of the element & increment it. It takes .5 seconds for this to complete so if the user double clicks while the image is moving it messes up the css position by changing it twice.

当用户点击菜单时,我抓住元素的x位置并递增它。完成此操作需要0.5秒,因此如果用户在图像移动时双击,则会通过将其更改两次来扰乱css位置。

I think the best solution would be to disble the user from double clicking on these buttons within .5s, is there a way to do this?

我认为最好的解决方案是让用户在.5s内双击这些按钮,有没有办法做到这一点?

Below is the relevent excerpt from JS

以下是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()
    });

5 个解决方案

#1

May I suggest you to declare some "in progress" flag? For example set some global variable in onclick handler and reset it when animations ends.

我可以建议你宣布一些“进行中”的标志吗?例如,在onclick处理程序中设置一些全局变量,并在动画结束时重置它。

5 个解决方案

#1

更多相关文章

随机推荐