如何在ios设备上检测网站上的三击?

问题描述 投票:0回答:1

我必须在移动设备上三次点击我的网站主体上显示和隐藏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>
javascript jquery ios click
1个回答
0
投票

在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();
    });

}

根据您的要求,您可能还需要考虑从同一行动中解雇的touchendclick事件。

© www.soinside.com 2019 - 2024. All rights reserved.