CODEWITHSUNDEEP
htmlcssangularjsmobile
Tater
Tater

Reputation: 105

Trouble tapping on link in mobile view of site?

Just started working on mobile responsive design for a site I'm working on. During testing I noticed the main tabs that link to different views of the site, which can normally can be clicked with no problem on desktop, barely responds when tapped on a phone or in the browser developer tools that simulate a tap. If I click it repeatedly then it will eventually register, but it's not exactly user friendly.

You can see what I'm talking about if you go to www.runnercalculator.com and click between the two tabs on the normal desktop view and then inspect and tap it in mobile.

What is different between a tap and a click that I'm not accounting for here?

How can I make a view link work as a "one tap click" for mobile?

Upvotes: 1

Views: 175

Answers (1)

MrNobody007
MrNobody007

Reputation: 1837

When making use of angular-touch.js(ngTouch module) you need to make sure that ng-click is placed properly in template.

<a href="#/pace" class="tabTabs ng-isolate-scope" info="paceCalc">
   <li class="tabRowLi" ng-click="toggleSelect0()" ng-class="tabRowLi">
       <span class="tabText ng-binding">Running Pace</span>
   </li>
</a>

In your template, ng-click is placed inside a anchor tag. ngTouch module stops event propagation when you click on <a> which makes ng-click passive.

Avoid using ngTouch module unless you have plugins which has dependency over it or take extra care while creating templates with ng directives.

Upvotes: 1

Related Questions