Question

我一直在努力解决这个问题。即使在尝试了解此问题的一些已知解决方法之后，我也无法在iOS Safari上使用JQuery .click（）事件。

我的代码：

HTML：

<div class="mobile-nav-menu">
       <a href="#" onclick="void(0)">
          <img id="hamburger-menu-icon" src="assets/dot-menu.svg">
       </a>
</div>

JS（省略了备用长度的变量声明）：

     window.onload = () => {
       hamburgerMenuIcon.click(toggleMobileNavDropdown);
     }

     const toggleMobileNavDropdown = () => {

        if(mobileNavDropdown.height() == 0) {

            mobileNavDropdown.css({
                height: '180px',
                width: '200px'
            })
            mobileNavContents.delay(800).fadeIn(900);

        } else if(mobileNavDropdown.height() == 180) {

            mobileNavContents.fadeOut(400);

            setTimeout(() =>  {
                mobileNavDropdown.css({
                height: '0px',
                width: '0px'
            })
            }, 400)
        }
    }

除了Safari iOS之外，任何浏览器（包括移动设备或桌面设备）都可以毫无问题地运行。我花了一些时间在谷歌上，并遇到了一些已知的工作。以下是我迄今为止没有成功的尝试：

我尝试将cursor: pointer;应用于该链接。从我可以收集到的，没有这个Safari iOS不会将该元素注册为可点击。
由于添加光标CSS属性不起作用，我尝试将onclick="void(0)"添加到HTML中，如上面的HTML代码段所示。这是我在Stack上遇到的另一个建议，我假设它以某种方式允许Safari iOS将该元素注册为可点击。
在我的第三次尝试中，我尝试将click事件更改为vanilla JS，并添加touchstart and tap：
```
hamburgerMenuIcon.on("click touchstart tap", toggleMobileNavDropdown);
```

到目前为止，没有任何内容。有什么建议？

Answer 1

我是这样做的，首先是这一部分是为了阻止多次发生的事件，因为我从下一步开始冒泡：

function eventHandler(event, selector) {
    event.stopPropagation(); // Stop event bubbling.
    event.preventDefault(); // Prevent default behaviour
    if (event.type === 'touchend' || event.type === 'touchcancel')
      selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
  }

然后对于实际的元素交互（你不需要去抖动部分，但我发现它很有用，如果你喜欢我会链接你那个插件，重量很轻，很有帮助）：

$(".selection-button").on('click touchend touchcancel', $.debounce(
  100,
  function(e) {

    //whatever you want to do

  }));

即使尝试了一些已知的修复程序，jQuery .click（）也无法在iOS Safari上运行

1 个答案: