0

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

Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35
  • 1
    Is this what you want: `window.location = event.currentTarget.href`? – Barmar May 30 '21 at 22:36
  • 1
    Why do you have button inside another button??? You can't have a button or a link inside another button. It's very hard to have an answer to you question, because what you are doing is against W3C's specs – JulianSoto May 30 '21 at 22:57
  • @Barmar, I found that I can replace ```
  • Link
  • ``` with: ```
  • Link
  • ``` but then I realized that I have many such buttons so this solution is not practical. Instead, I rephrased my question in [here](https://stackoverflow.com/questions/67767265/double-touch-on-ios-triggers-default-behavior-of-rescaling-the-entire-page) Thanks – Avner Moshkovitz May 31 '21 at 02:33
  • Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) – tevemadar May 31 '21 at 10:06