javascript - onclick 和 ontouchstart 同时启动

Question

我的移动 View 触发了一个 ontouchstart 事件，它链接到这个:

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

在我的设备 (iPhone 5) 上，当我点击按钮时，它会切换两次，因此它先拉伸(stretch)然后收缩。这是因为 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。

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 不干扰

isMobile 函数取自 Detecting mobile devices并删除了 webOS 部分，因为这将桌面浏览器视为移动设备。