0

I have a classic dropdown menu on an Angular project with a main link always shown and a tree of sublinks shown only when hovering this one.

I have two events on the parent:

ng-mouseenter="vm.toggleDropdown($event)"
ng-mouseleave="vm.hideDropdowns($event)"

And they work perfectly fine. The main link has a simple:

ng-click="vm.navToState(item.urlState, $event)"

With a $state.go within to go to the string passed as parameter. On mobile devices, ng-mouseenter is being triggered on tap, showing the dropdown menu and this is perfect. The thing is that ng-click is being triggered too so the menu is only visible a fraction of a second before the next state loads. Is there any way to detect if ng-click is being fired by a touch event so I could add an if statement to navToState() and prevent the $state.go()? I understand that this way that main link would be unreachable in mobile but I'll take care of that adding an extra link within the dropdown.

Any other workaround for the same result is fine too.

Thanks!

Rising Concupiscence
  • 81
  • 7
  • I just bound a touchstart event to all these links with an event.stopPropagation() and it seems to be doing just fine on an emulator. Will need to test it more to be sure. I highly doubt this is the correct solution to this though. – Rising Concupiscence Aug 30 '16 at 12:13

1 Answers1

0

Could you set a variable based on whether it is a mobile browser and use that as a check navToStart as to whether you state change or not, then have a separate state change function that doesn't care whether it's mobile or not so you can still change states in the mobile browser? That's one idea, but if it doesn't work, could be worth putting some code in your question for a reference.

Here's an answer on detecting mobile browsers: https://stackoverflow.com/a/11381730/5349719

Community
  • 1
  • 1
cullimorer
  • 755
  • 1
  • 5
  • 23
  • There's no more code aside from a $state.go() within navToState() really, which was made because there was no way to preven a ui-sref from firing. I guess detecting the browser would be the only way right? Looking at the link you provided maybe I could get by with: var touchDevice = ('ontouchstart' in document.documentElement); – Rising Concupiscence Aug 30 '16 at 11:33
  • It's one idea for sure. Where did you get the "var touchDevice = ('ontouchstart' in document.documentElement);" from? I can't see it in the answer I provided. – cullimorer Aug 30 '16 at 11:38
  • Looks like this is what you want: window.mobilecheck = function() blablabla – cullimorer Aug 30 '16 at 11:38
  • True. yea give it go and let me know it works out :) – cullimorer Aug 30 '16 at 11:43
  • It always seems to return true though. Makes sense as it seems to detect if the events are supported, not if they are being used. – Rising Concupiscence Aug 30 '16 at 11:48