Click not working on mobile browsers

Question

I have the following problem I have a

<ul>
  <li>
     <a href="/">main page</a>
  </li>
</ul>

This will work on any desktop browser but it won't click on Ipad/Iphone and Android.

Answer 1

this issue is related to devices (Ipad/Iphone, android phones) as you mentioned. the touchend event call event.stopPropagation() for that you was not able to achive the action. To solve your problem you have 2 solutions: -do not put your code inside

<ul> and <li> and the code will be like that 

<div>
   <a href="/"> main page</a>
</div>

-The second solution create a new directive called eventStop

<ul>
 <li>
   <a href="/" stop-event="touchend">main page</a>
 </li>
</ul>

and the directive is

.directive('stopEvent', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                element.on(attr.stopEvent, function(e) {
                    e.stopPropagation();
                });
            }
        };
    });