在“tap，click”事件触发两次。如何避免？

Question

我想制作一个带有区域标签的图像，以便我可以点击每个区域并显示警报。

在同时包含“轻敲和点击”时，我似乎无法弄清如何避免在桌面模式下使用鼠标单击时触发事件两次。

$(document).ready(function(e) {
    $('img[usemap]').something();

    $('area').on('tap click', function() {
        alert($(this).attr('alt'));
    });
});

我已经尝试了几种方法，例如使用布尔值分离事件，但是由于我不擅长JavaScript，它们并没有真正起作用。请帮助我解决这个问题。非常感谢！

- Peter W

---

我创建了一个 jsfiddle，应该可以重现错误，但实际上没有：https://jsfiddle.net/s3m3x4ds/ 我猜测你在页面上以某种方式两次包含了相同的代码，并且它将两个点击事件绑定到同一个元素。 - John Sparwasser

@JohnSparwasser 谢谢！很有趣。为什么这个只触发一次，但我的会触发两次 :/ - Peter W

你也可以尝试移除tap事件来查看是否会出现错误。如果在没有绑定tap事件的情况下仍然触发了两次事件，那么你就知道这是重复代码或类似的问题。 - John Sparwasser

@JohnSparwasser 尝试将 "tap" 去掉，只留下 "click"，它只触发一次而没有任何错误，但是 "tap click" 也没有给我任何错误，它只触发了两次 :/ 我需要花更多的时间学习 JavaScript.. 感谢您的帮助！ - Peter W

Answer 1

您可以尝试测试window.ontouchstart并仅绑定相关事件。

$(document).ready(function(e) {
    $('img[usemap]').something();

    function clickArea(){
        alert($(this).attr('alt'));
    }

    if(typeof window.ontouchstart === 'undefined'){
        $('area').on('click', clickArea);
    } else{
        $('area').on('touchstart', clickArea);
    }
});

- Kevin F

---

哇，它运行得非常漂亮！非常感谢！倒计时结束后将标记为答案。 - Peter W

这将在同时具有触摸和点击接口的设备上引起问题。请参见此处：JavaScript touchend versus click dilemma - Web_Designer