如何检测 ios 设备上网站的三次点击？

Posted 2023-03-14

【中文标题】如何检测 ios 设备上网站的三次点击？

【英文标题】：how to detect triple click on website on ios device?

【发布时间】：2019-04-20 11:31:34

【问题描述】：

我必须在移动设备上三次点击我的网站正文时显示和隐藏一个 div 我用 javascript 编写的以下代码在 android 设备中运行良好，但在 ios 中不起作用。 所以你能帮我解决它吗？

代码是：

window.onload = function() 

  document.querySelector('body').addEventListener('click', function(evt) 

    evt.preventDefault();
    if (evt.detail === 3) 
      document.getElementById('mmu').style.height = '100px';
    

    if (evt.detail === 1) 
      document.getElementById('mmu').style.height = '0px';
    

  );

#mmu 
  width: 100px;
  height: 0px;
  position: fixed;
  left: 0;
  cursor: pointer;
  top: 0;
  background: red;


body 
  height: 1000px;
  background: #eee;
  width: 100%;
  cursor: pointer;

<div id="mmu"></div>

【问题讨论】：

evt.detail 返回什么？

@AswinKumar 它在桌面和安卓设备上运行良好。 evt.detail 返回用户点击次数

【参考方案1】：

在 iOS 上，click 事件不会正常触发。相反，您需要监控触摸事件，例如touchend，以检查点击了多少次。

例如，您可能会尝试检查是否在足够的超时窗口内进行了点击

TOUCH_TIMEOUT_MILLISECONDS = 500
touch_count = 0
window.onload = function () 
    document.querySelector('body').addEventListener('touchend', function (evt) 
        touch_count += 1

        setTimeout(function () 
            touch_count = 0
        , TOUCH_TIMEOUT_MILLISECONDS);

        if (touch_count === 3) 
            document.getElementById('mmu').style.height = '100px';
        

        if (touch_count === 1) 
            document.getElementById('mmu').style.height = '0px';
        

        evt.preventDefault();
    );

根据您的要求，您可能还需要考虑从同一操作触发的 touchend 和 click 事件。