AngularJS-如何仅在cilck事件上不触发移动设备上的悬停动作（ng-mouseenter）

Question

I'm using AngularJS, and I currently have both a hover behaviour (using ng-mouseenter and ng-mouseleave) so when you hover on my content elements, it shows content on the page, but if you click on that element (using ng-click) it should go into a detail page for that element.

I have all of these configured on the same <div> , and it works on desktop. But if I use my iPhone, then when I click the element, it triggers the hover action instead of the click action. It takes a second click to get to the click action, and I want it to trigger on the first click for mobile devices.

How can I achieve this?

Thanks for any help you can offer.

Answer 1

You should emulate double click on touch devices. You can use this directive:

angular.module('app').directive('touchDevicesClick', function() {
  return function(scope, elem) {
    var element = angular.element(elem);
    element.on('touchstart', function(e) {
      element.triggerHandler('click')
    });
  };
})

or you can use $(elem).click() instead element.triggerHandler('click')