Question

我的移动视图触发了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;
}

NB。我不想使用jQuery。

Answer 1

通过测试浏览器类型并相应地删除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干扰

从Detecting mobile devices移除了移动功能，删除了webOS部分，因为这会将桌面浏览器视为移动设备。

Answer 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>

Answer 3

我想出了如果忘记ontouchstart是否被触发的想法。在这种情况下，我们在支持它的设备上，并且想要忽略onclick事件。由于ontouchstart应该始终在 onclick之前触发，我使用的是：

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

Answer 4

你可以这样写：

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

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

Answer 5

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

正确的解决方案是将touch事件正确标记为使用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/。

Answer 6

默认情况下，start from chrome 56无法使用e.preventDefault()进行触摸事件。

您可以通过设置{ passive: false }选项来使其手动工作：

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

onclick和ontouchstart同时进行

6 个答案: