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);
}