时间戳

首页 > 解决方案 > onclick 在 Safari 和移动设备上不起作用

javascript - onclick 在 Safari 和移动设备上不起作用

问题描述

我已经尝试修复这个错误很长时间了，并联系了我的几个朋友，他们都被难住了。我有一个网站，但没有一个按钮在移动设备或 safari 上运行（在移动设备上，当我点击按钮时，会播放 :hover 动画）。我已经尝试了很多修复（将它们更改为标签、事件侦听器、tabindex、ontouchstart），但都没有工作。该网站已上线，如果需要，我可以提供网址（但我不想看起来像是在宣传）

这是一个按钮不起作用的示例-html-

<a href="javascript:void(0)" tabIndex="0" id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
</a>

-css-

#navWrap{
    position: absolute;
    top: 75px;
    right: 60px;
    transform: translate(0px, -50%);
    transition: 0.7s;
    font-size: 50px;
    cursor: pointer;
}

-javascript 打开导航功能-

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

-javascript事件监听器-

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('click', openNav);
    document.getElementsByClassName('closebtn')[0].addEventListener('click', closeNav);
    document.getElementById('Create').addEventListener('click', create);
    document.getElementById('TInput').addEventListener('click', MYfunctionTwo);
});

我在 html 文件的页脚中有指向 js 文件的链接。

标签： javascripthtmlcsssafarionclick

解决方案

像这样绑定多个事件，我希望它对你有用。

// if supported touch, otherwise click event:
let clickOrTouchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

document.getElementById('navWrap').addEventListener(clickOrTouchEvent, openNav() );

推荐阅读