我在移动端视图上有一个ontouchstart
事件被触发,它与以下内容相关:
function mobileLinksShow() {
document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
}
当我在我的设备上(iPhone 5)点击按钮时,它会切换两次,因此它先扩展再收缩。这是因为onclick和ontouchstart同时触发。移除onclick可以解决移动设备上的问题,但桌面浏览器现在显然无法工作,是否有一种方法可以在移动设备上禁用onclick?
<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。