Question

我有一个我建的旋转木马的问题。它具有容器内的元素，当单击具有类moveCarouselRight的按钮时，这些元素将以可见容器的大小“向左”移动。

我的问题是，当用户点击太快，即双击时，动画似乎会触发两次，这意味着元素没有正确安装在容器中，就像第一个“左”操作没有完成一样。

正如你所看到的那样，我尝试使用'disabled'标志修复此问题，但似乎第二次点击事件在第一个事件的js到达该行代码之前被触发。

var disabled = false;

$('.moveCarouselRight').on('click', function() {

if (!disabled) {

    disabled = true;

    //change css property 'left' depending on container size

    disabled = false;
}
});

链接到jsFiddle：
jsfiddle.net/6TPcT/5

Answer 1

使用此：

<强> JS

$(".moveCarouselRight").dblclick(function(event){
    event.preventDefault();
});

或

$(".moveCarouselRight").dblclick(function(event){ return false; });

或

$(".moveCarouselRight").one("click", function(event) { //do something });

链接：http://api.jquery.com/one/

Answer 2

我通过在加载时将click事件绑定到选择器来修复此问题：

$('.selector').click(moveLeft);

在方法中，我解除了点击事件：

function moveLeft() {
    $(this).unbind('click');
    //css transition stuff
}

然后，我在css过渡的末尾添加了一个监听器：

$("selector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",  function(){
    $(this).siblings('.nextThree').click(moveThreeRight);
});

运作魅力：）

感谢您对此的帮助

轮播动画事件问题

2 个答案: