Javascript 个按钮，防止鼠标双击

Question

我有两个按钮，它们使用 Javascript 来调用它们控制轮播和其他一些操作的功能。

我只想禁用用户双击按钮的功能。

这是我的代码：

var onRightArrow = function(e) {
    //alert("Right");
    if (unitCtr<=unitTotal) {
        unitCtr++;
        TweenLite.to(productTxt, 0.2, {y: "-="+unitHeight });
        TweenLite.to(productImg, 0.2, {y: "-="+unitHeight });
    }
    hideArrows();
}, onLeftArrow = function(e) {
    //alert("Left");
    if (unitCtr>1) {
        unitCtr--;
        TweenLite.to(productTxt, 0.2, {y: "+="+unitHeight });
        TweenLite.to(productImg, 0.2, {y: "+="+unitHeight });
    }
    hideArrows();
}

arrowRight.addEventListener('click', onRightArrow, false);
arrowLeft.addEventListener('click', onLeftArrow, false);

我知道 dblclick 代码行，但不确定如何应用来禁用鼠标的双击操作。

现在当用户双击时，它会错位元素在旋转木马中的位置，这就是为什么我想删除 dblclick 影响按钮的能力。

提前感谢您的任何建议。请避免在 JQuery 中提供答案。

更多代码： http://codepen.io/anon/pen/QjGydw

Answer 1

我自己解决了这个问题，虽然答案更复杂，但是否有人希望应用侦听器来禁用双击功能，就在这里：

(arrowRight 和 arrowLeft 是已经通过ID定义的变量)

arrowRight.addEventListener('dblclick', function(e){
    e.preventDefault();
    });
    arrowLeft.addEventListener('dblclick', function(e){
    e.preventDefault();
    });

我还创建了在动画发生时禁用箭头的函数以防止错误。动画完成后重新启用。函数如下所示：

function disableArrows() { //ADDED NEW FUNCTION TO DISABLE ARROWS
    arrowRight.removeEventListener('click', onTopArrow, false);
    arrowLeft.removeEventListener('click', onBottomArrow, false);
}

function enableArrows() { //ADDED NEW FUNCTION TO RE-ENABLE ARROWS
    arrowRight.addEventListener('click', onTopArrow, false);
    arrowLeft.addEventListener('click', onBottomArrow, false);
}

Javascript 个按钮，防止鼠标双击

Javascript buttons, prevent mouse double click

html

javascript

css

carousel