具有mousedown事件处理程序的AngularJS指令但是click事件永远不会触发

Question

I have created a custom directive that wires up the mousedown/touchstart and mouseup/touchend events that add/removes a css3 transform (press/release effect) to the element.

It works great in desktop Chrome and IE, iOS in iOS7 and 6, but Android 4.4.2 it displays the transform but the click event never fires to actually navigate.

The only way I can get it to work is to click/tap very very fast on the element. It is almost as if the click event is getting swallowed or cancelled when using a normal tap speed.

I apply the directive to divs within and divs with an ng-click directive - neither one works.

EDIT: There is a scenario where it does not work in any browser - if the div I add the directive to also has ng-click attached. If I add it one level down in the DOM by adding a nested div and apply it to that div it works fine.

Here is an example div wrapped in a link

<a ng-href="#/concept/{{conceptOfDay.id}}">
  <div class="contentBox" touch-tilt>
      <i class="fa fa-2x icon fa-calendar-o"></i>
      <div class="itemTitle">concept of the day</div>
      <div class="itemSubTitle">{{conceptOfDay.title}}</div>
  </div>
</a>

And the directive

angular.module('app').directive('touchTilt', ['$document', function ($document) {

    var directive = {
        restrict: 'A',
        link: function (scope, element, attr) {

            function mousedown(event) {
                var translateString = "perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( -30px )";
                element.css('transform', translateString);
                $document.on('touchend mouseup', mouseup);
            }

            function mouseup(event) {
                var idleCss = "perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( 0px )";
                element.css('transform', idleCss);
                $document.off('touchend mouseup', mouseup);
            }

            element.on('touchstart mousedown', mousedown);
            element.click(function () { alert('click event handled'); })
        }
    };
    return directive;
}]);

Answer 1

Typically you use the ngTouch module when moving to Android or touch devices. There is a delay on touch devices as noted by this documentation:

https://docs.angularjs.org/api/ngTouch

Some elements are missing from your example, or you just do it differently then I do, so I won't comment on that in particular (I tend to use ngClick explicitly).

Anyway, you should be able to use the ngClick directive in ngTouch to get touch screens to work better. I had a similar problem and including angular-touch solved quite a few.

You didn't note what libraries you include so if I'm being redundant that's why.

Answer 2

Inside the link function you are just declaring two handler functions mousedown and mouseup, but you are never setting them up to be fired. You need to either add ng-click in the markup or bind the element to the event listeners in the link function.

// (Inside of link function)
element.bind('mousedown', function(){
    console.log('clicked on document');
  });