onclick和ontouchstart同时

7 浏览
0 Comments

onclick和ontouchstart同时

在我的移动视图上，有一个ontouchstart事件触发，它与以下内容相关联：

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

在我的设备（iPhone 5）上，当我点击按钮时，它会切换两次，因此会先扩展再收缩。这是因为onclick和ontouchstart同时触发。删除onclick可以解决移动设备上的问题，但是桌面浏览器明显不起作用，是否有办法在移动设备上禁止onclick？

HTML：

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。

0

3 答案

0 Comments

问题的原因是，在移动设备上同时使用onclick和ontouchstart事件可能会导致冲突。解决方法是根据浏览器类型进行测试，并相应地移除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年以及之前也是如此）。

0
0 Comments

在Chrome v65版本中，ontouchstart和onclick同时触发的问题是由于浏览器对于触摸事件和点击事件的处理方式不同导致的。

解决方法是在ontouchstart事件处理函数中调用onclick事件处理函数，并使用preventDefault()方法阻止触摸事件的默认行为，从而避免同时触发onclick事件。

具体代码如下所示：

在上述代码中，ontouchstart事件绑定了touch_start()函数，该函数接收一个事件对象e作为参数。在函数内部，使用e.preventDefault()方法阻止触摸事件的默认行为。然后，通过e.target.onclick()调用onclick事件处理函数mobileLinksShow()。

需要注意的是，在Chrome v65版本中，ontouchstart和onclick同时触发的问题已经被浏览器开发者意识到并在后续版本中进行了修复。如果使用的是Chrome v65版本之后的版本，可能不再需要以上解决方法。

更多关于该问题的信息可以参考Chrome官方网站上的相关链接：chromestatus.com/features/5093566007214080

0
0 Comments

原因：

这段代码的目的是在触摸设备上，如果触发了ontouchstart事件，就将touchAvailable变量设置为true，然后执行myFunction()函数。如果没有触发ontouchstart事件，就执行onclick事件处理程序，并在执行前检查touchAvailable的值，如果为false则执行myFunction()函数。

解决方法：

这段代码的解决方法是使用一个变量touchAvailable来记录是否触发了ontouchstart事件，以此来判断是在触摸设备上还是在非触摸设备上执行相应的事件处理程序。具体的解决方法可以分为以下几步：

1. 在script标签中声明一个全局变量touchAvailable，并将其初始值设置为false。

2. 在按钮的ontouchstart事件处理程序中，将touchAvailable设置为true，并执行myFunction()函数。

3. 在按钮的onclick事件处理程序中，添加一个条件判断，如果touchAvailable的值为false，则执行myFunction()函数。

下面是整理后的文章：

在触摸设备上同时触发ontouchstart和onclick事件时，可以使用一个变量来记录是否触发了ontouchstart事件，以此来判断执行相应的事件处理程序。具体的解决方法如下：

上述代码中，我们使用一个变量touchAvailable来记录是否触发了ontouchstart事件。如果触发了ontouchstart事件，touchAvailable变量会被设置为true，并且执行myFunction()函数。如果没有触发ontouchstart事件，则会执行onclick事件处理程序，并在执行前检查touchAvailable的值，如果为false，则执行myFunction()函数。

这种解决方法可以确保在触摸设备上只执行ontouchstart事件处理程序，而在非触摸设备上执行onclick事件处理程序。通过记录touchAvailable变量的值，我们可以判断当前设备是否支持触摸事件，并相应地执行相应的事件处理程序。

通过使用一个变量来记录是否触发了ontouchstart事件，我们可以在触摸设备和非触摸设备上分别执行不同的事件处理程序。这种解决方法可以确保代码在不同设备上的兼容性，并提供了一种简单的方式来处理同时触发ontouchstart和onclick事件的情况。

0