driver.js
driver.js copied to clipboard
kamranahmedse
on mobile the close button clicks trough to underlying elements
We integrated driver.js on our website and defined a tour with several steps. The last step has a close button. We noticed that when clicking this button, the underlying element is directly clicked, but only on mobile.
We think that the problem is the following line https://github.com/kamranahmedse/driver.js/blob/24403cf99b4b496037c5b4fbfc0bc42f5aac3ca4/src/index.js#L101
When touching the close button, the tour is ended, and the popup and overlay disappears. This is because the listener is registered on touchstart events. But then the click is also triggered for elements on the touched location and their listeners are notified.
In our case under the close button is a link to another page and the link is directly activated.
The expectation would be that underlying elements are NOT activated when clicking on the close button.
I can confirm the same issue. The same thing happens despite which button you click on the popover. (ex. If you click Next and below the button there is a link it will follow that link as if it was clicked.
The only workaround that I can think of is disabling all pointer events on the body during the step transition and enabling them a few milliseconds after the next step has loaded.
onHighlightStarted: (elem) => { if ($(window).width() < 992) { $("body").css("pointer-events", "none"); } }, onHighlighted: (elem) => { if ($(window).width() < 992) { setTimeout(function(){ $("body").css("pointer-events", "auto"); }, 300); } },
My port of dirver.js might adress your issues. I've rewritten the click handling logic and added more control via a strictClickHandling option.
I haven't tested it much on mobile though
We just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.
