I have a webapp problem.
double-touching specific button in an iOS device (iPad)
triggers a click event which triggers some iOS default behaviour, which scales the page.
I want to prevent this from happening.
So I added an eventListener to the click event, at a top-element elementId1.
elementId1
elementId2
elementId3
elementId4
I choose the top-element elementId1 because this side effect happens on various nested elements, and I want to have a single catch-all click eventListener, at the top of the html element hierarchy, that will prevent this from happening in multiple places.
The eventListener triggers a function onClickTopElement that calls event.preventDefault()
The eventListener is set with attributes:
- capture: false - this cause the event to trigger in the bubbling phase, i.e. on the way up and not on the way down
This means that:
- the event first fires on the element which may have a function to trigger on click and do what it was designed to do.
- as the event bubbles up, it gets to the elementId1 element, which fires the function onClickTopElement which calls
event.preventDefault()
, which disables the iOS default behaviour of scaling up the page.
// add catch-all 'click' eventListener, at the top of the html elements so that on iOS the side-effect of scaling-the-page when double-touching never happens
let element1 = document.getElementById('elementId1');
element1.addEventListener( 'click', onClickTopElement, {capture: false, passive: false} );
function onClickTopElement(event) {
// prevent from trickling the event, when touching, which causes, in iOS to zoom the entire page
event.preventDefault();
}
The end result is that double-touching the buttons does not cause the page to scale up. Good!
This is good but creates another side-effect.
There is a button (elementId4) with href tag that when clicked, takes to another page.
This is done by the browser's default behaviour.
But since elementId4 is nested within elementId1, the default onClick behaviour is now prevented.
One solution is to add specific onClick eventListener to elementId4 and do what the default behaviour does, i.e. navigate to the href.
What would be the command to navigate to the href within an onClick eventListener function.
Thanks