禁用单击悬停/双击问题iPad

Question

I have an issue with my web application. The issue is that on Safari for iPad I have to click 2 times to actually perform the click on the <a> tag. The first one performs a hover like when you hover with the mouse on desktop. I am using AngularJS. I tried on firefox, it works just fine. Here is my code :

<ul class="navigation">
        <li class="navigation-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
            <a [routerLink]="['/']" class="navigation-link" role="button">
                menu1
            </a>
        </li>
        <li class="navigation-item" [routerLinkActive]="['active']">
            <a [routerLink]="[myRoute]" class="navigation-link" role="button">
                menu2
            </a>
        </li>
        <li class="navigation-item" [routerLinkActive]="['active']">
            <a [routerLink]="[myRoute2]" class="navigation-link" role="button">
               menu3
            </a>
        </li>
    </ul>

I tried adding (onclick)=" " or ng-onclick=" " or style="cursor:pointer" so the hover doesn't trigger but none of this worked.

Thank you for your help

Answer 1

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});