how to detect triple click on website on ios device?

Question

I have to show and hide a div on triple click on body of my website in mobile devices the below code that I wrote in JavaScript is work fine in android devices but it doesn't work in IOS. so would you please help me to resolve it?

the code is :

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>

Answer 1

On iOS, the click event doesn't fire normally. Instead you will need monitor touch events such as touchend to check how many taps are made.

For example you might try to check if the taps are made within a sufficient timeout window like so

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

Depending on what your requirements are you may also need to account for touchend and click events firing from the same action.