onclick 和 ontouchstart 同时答案

【问题标题】：onclick and ontouchstart simultaneouslyonclick 和 ontouchstart 同时
【发布时间】：2014-02-26 03:02:27
【问题描述】：

我的移动视图上触发了ontouchstart 事件，它与此相关：

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

在我的设备 (iPhone 5) 上，当我点击按钮时，它会切换两次，因此它会伸展然后收缩。这是因为 onclick 和 ontouchstart 同时触发。移除 onclick 可以解决移动端的问题，但现在桌面浏览器显然无法正常工作，有没有办法抑制移动端的 onclick？

HTML：

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

CSS：

.mobile-head-bar-links {
    height: 0;
    overflow: hidden;
    background-color: #F76845;
    transition: .5s ease;
    -webkit-transition: .5s ease;
}

.mobile-head-bar-links-transition {
    height: 7em;
}

注意。我不想使用 jQuery。

【问题讨论】：

标签： javascript html css touch

【解决方案1】：

默认情况下，将e.preventDefault() 用于触摸事件不起作用start from chrome 56。

您可以通过设置{ passive: false } 选项让它手动工作：

document.querySelector('mobile-head-bar-left')
  .addEventListener(
    'touchstart',
    function(e) {
      // do something
      e.preventDefault()
    },
    { passive: false }
  )

【讨论】：

【解决方案2】：

您可以将一个函数绑定到 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>

【讨论】：

无法在 Chrome v65 中运行：chromestatus.com/features/5093566007214080

【解决方案3】：

我刚刚想出了一个想法，就是记住 ontouchstart 是否被触发过。在这种情况下，我们在支持它的设备上并希望忽略onclick 事件。因为ontouchstart 应该总是在onclick 之前触发之前，我正在使用这个：

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

【讨论】：

【解决方案4】：

对于像触摸屏笔记本电脑这样的情况（“点击”可能来自触摸或鼠标），这仍然是错误的。在某些并非来自触摸的点击的移动案例中（例如，附加键盘或蓝牙键盘上的 Enter 键），它也会损坏。

正确的解决方法是正确地将触摸事件标记为使用 preventDefault 处理，这样就不会产生点击事件。例如。

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

详情请见http://www.html5rocks.com/en/mobile/touchandmouse/。

【讨论】：

【解决方案5】：

通过测试浏览器类型并相应地删除 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 函数取自 Detecting mobile devices 和 webOS 部分，因为这将桌面浏览器视为移动设备。

【讨论】：

由于触摸设备而导致的错误方法不仅限于手机（2014 年也没有）。

【解决方案6】：

你可以这样写：

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

但是：如果你使用这段代码，这个函数只能被调用一次，即使你点击了两次span。

【讨论】：