<span> 或 <div> 标签上的点击事件无法正常工作 Safari 问题

Question

我在 iPhone(7 Plus) 上遇到了 Click 事件问题。单击方法不适用于 IOS 设备。但在 IOS Chrome.

上工作正常

代码如下：

$('.menuOpen').on('click', function() {
  console.log('Show Menu');
  $('.menuBar').toggleClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<span class="menuOpen">Menu</span>
<ul class="d-none menuBar">
  <li>Action 1</li>
  <li>Action 2</li>
  <li>Action 3</li>
  <li>Action 4</li>
</ul>

我已经尝试过这些对我不起作用：

On click function is not working on safari browser

onclick() not working in safari

jquery click not working on ipad/iphone

感谢您的帮助！！

Answer 1

我遇到了这个解决方案，在 <span> 上添加 role="button" 并且 click 事件开始为 IOS 设备工作：

<span class="menuOpen" role="button">Menu</span>

把<span>换成<button>

也可以解决

$('.menuOpen').on('click', function() {
  console.log('Show Menu');
  $('.menuBar').toggleClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<span class="menuOpen" role="button">Menu</span>
<ul class="d-none menuBar">
  <li>Action 1</li>
  <li>Action 2</li>
  <li>Action 3</li>
  <li>Action 4</li>
</ul>

参考文献：

Safari HTML Reference

ARIA: button role

<span> 或 <div> 标签上的点击事件无法正常工作 Safari 问题

Click event on <span> or <div> tag not working safari issue

html

javascript

safari

jquery

mobile-safari