1

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

 }
};
Sai
  • 11
  • 2

1 Answers1

0

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);
Rudu
  • 15,682
  • 4
  • 47
  • 63
  • Thank you any Example you can provide ? – Sai Aug 24 '20 at 17:27
  • Thank you for the Update this was working fine i feel this function is not calling in tablet i feel its not taking window.onclick so is there any chance that i can write ontouchstart which can work for both desktop and tablet here is my code. window.onclick = function(e) { if (!navigator.userAgent.match(/Android|webOS|iPhone|Blackberry/i)) { if ((!e.target.matches('.dropdown-backdrop')) && e.target.closest('#dropdown') === null) { console.log("closingthefilter") closeFilter(); } } }; – Sai Aug 24 '20 at 21:35
  • Sorry - I don't quite understand your question. If you're asking can you just use one of touch or click - the answer is, sadly, no. A machine without a touch interface won't report touch events, and a machine without a mouse may not report click events. Note you cannot browser-agent sniff to solve this, since you can have eg touch-screen PCs which will give touch events for screen interaction, and click events for mouse interaction. – Rudu Aug 24 '20 at 22:20
  • No i was just asking as i am getting the issue only in Ipad so can i write any touchstart function for Ipad because for me in desktop its working perfectly fine with the above code – Sai Aug 24 '20 at 23:28