event.stopPropogation() not working in IPAD/Tablet

Question

I am using coveo Framework and i used facets inside a dropdown button i wrote a window.onclick function so that when clicked outside dropdown button the dropdown should be closed. everything seems to be working fine but when i clicked facets checkbox the dropdown was closing and when i talked to coveo team they said the query was triggered when coveo checkbox was clicked thats the reason the dropdown was closing when clicked. To fix this i used event.stopPropogation and that was working fine in desktop mode but when it comes to IPAD Mode this is not working any help Here is my code

// Prevent event bubble up to window.
document.getElementById('dropdown').addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  
});

function close() {
  document.getElementById('dropdown').classList.remove('show');
}
window.onclick = function(event) {
  if (!navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i)) {
    if ((!event.target.matches('.dropdown-backdrop')) && event.target.closest('#dropdown') === null) {
      close();
  }

 }
};

Answer 1

I believe the issue is on a touch screen device, you actually get touch events possibly in addition to mouse events. I suspect if you attached another listener to touchstart that does the same thing as click you will see the same results on the tablet.

In theory you should see no click events on a tablet (a user cannot click without a mouse) but in practice the browser emulates click events. However, when those events are generated the browser may fire both touch events and mouse events in response to the same user input. If both events are fired you're successfully stopping the click event from propagating but not the touch event.

Update

You haven't given enough detail to fully give an example, but the change happens in the listeners you attach to your dropdown element.

// Note instead of using the same anonymous function twice,
//   I've defined a function to stop propigation
function stopProp(e) {e.stopImmediatePropagation();}
document.getElementById('dropdown').addEventListener('click',stopProp);
document.getElementById('dropdown').addEventListener('touchstart',stopProp);