Как обнаружить тройной клик на сайте на устройстве IOS? - PullRequest
Новая
       16

Как обнаружить тройной клик на сайте на устройстве IOS?

0 голосов
/ 20 апреля 2019

Я должен показать и скрыть 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>

1 Ответ

0 голосов
/ 20 апреля 2019

В 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, инициированные одним и тем же действием.

...