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按钮，防止鼠标双击

1 个答案: