Javascript onclick和ontouch同时启动

我的手机视图上触发了一个

ontouchstart

事件，该事件与此相关：

function mobileLinksShow() {
    document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
}

在我的设备（iPhone5）上，当我点击按钮时，它会切换两次，因此它会先扩展，然后收缩。这是因为onclick和ontouch同时启动。删除onclick解决了移动设备上的问题，但现在桌面浏览器显然不起作用，有没有办法抑制移动设备上的onclick

HTML:

---

注意。我不想使用jQuery。

您可以这样写：

var called = false;
function mobileLinksShow() {
    if(!called)
        document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
        called = true;
    }
}

---

但是：如果使用此代码，该函数只能调用一次，即使您单击跨度两次。

通过测试浏览器类型并相应删除onclick找到了解决方法：

function removeMobileOnclick() {
    if(isMobile()) {
        document.querySelector('.mobile-head-bar-left').onclick  = '';
    }
}

function isMobile() {
    if (navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)
            || navigator.userAgent.match(/Opera Mini/i)
            || navigator.userAgent.match(/IEMobile/i)
            ) {
        return true;
    }
}
window.addEventListener('load', removeMobileOnclick);

通过这种方式，您可以使

onclick

和

ontouchstart

互不干扰

---

isMobile功能取自并删除了

webOS

部分，因为它将桌面浏览器视为移动浏览器。

对于触摸屏笔记本电脑（其中“单击”可能来自触摸或鼠标）这样的情况，这一功能仍然无效。在一些移动设备中，点击不是来自触摸（例如，连接的键盘或蓝牙键盘上的输入键），它也会被破坏

正确的解决方案是将触摸事件正确标记为使用preventDefault处理，然后不会生成任何单击事件。例如

function mobileLinksShow(event) {
  document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
  event.preventDefault();
}

---

详细信息请参见。

我刚想到一个主意，就是记住是否触发了

ontouchstart

。在本例中，我们使用的设备支持此功能，希望忽略

onclick

事件。由于

ontouchstart

应始终在

onclick

之前触发，因此我使用以下方法：

touchAvailable=false；
按钮

您可以将一个函数绑定到ontouchstart，该函数调用绑定到onclick的任何内容，但随后会阻止默认值，以便它实际上不会触发onclick

然后，您可以轻松地将此ontouchstart事件复制粘贴到使用onclick的所有位置

<span class='mobile-head-bar-left' ontouchstart='touch_start(event)' onclick='mobileLinksShow()' ><i class="fa fa-bars"></i></span>

<script>
function touch_start(e){
  e.preventDefault();
  e.target.onclick();
}
</script>

功能触摸启动（e）{
e、 预防默认值（）；
e、 target.onclick（）；
}

使用触摸事件的

e.preventDefault（）

默认情况下不起作用

通过设置以下选项，您可以让它手动工作：

document.querySelector（'mobile-head-bar-left'）
.addEventListener(
“touchstart”，
职能（e）{
//做点什么
e、 预防默认值（）
},
{被动：false}
)

由于触摸设备导致的方法不好，不仅限于手机（2014年也不例外）。不适用于Chrome v65：

function mobileLinksShow(event) {
  document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
  event.preventDefault();
}

<span class='mobile-head-bar-left' ontouchstart='touch_start(event)' onclick='mobileLinksShow()' ><i class="fa fa-bars"></i></span>

<script>
function touch_start(e){
  e.preventDefault();
  e.target.onclick();
}
</script>