revolunet / angular-carousel

Mobile friendly AngularJS carousel
http://revolunet.github.io/angular-carousel
MIT License
1.55k stars 705 forks source link

prevent clicks on desktop #396

Closed revolunet closed 8 years ago

revolunet commented 8 years ago

While swiping on desktop, ngTouch triggers a click if your <li>has a ngClick

Here's a workaround to prevent this unwanted behaviour :

angular.module('xxx')
    .directive('testwipe', function () {
        return {
            restrict: 'A',
            scope: { method: '&testwipe' },
            link: function (scope, element, attrs) {

                element.on("mousedown", function (event) {
                    element.unbind("click");
                    element.on("mouseup mousemove", function handler(evt) {
                        if (evt.type === 'mouseup') {
                            // click
                            scope.$apply(scope.method());
                        } else {
                            // drag
                        }
                        element.off("mouseup mousemove", handler);
                    });
                });
            }
        };
    });
axul commented 8 years ago

Working in latest chrome, safari, internet explorer 11, cordova with android 5.1, if I find something wrong I'll report

axul commented 8 years ago

After testing this directive, I can tell this is not a viable solution, sometimes it produces a weird behavior in touch devices. For now, this is working for me: @revolunet

 .directive('rnCarouselClick', ['$parse', function($parse){
   return {
     compile: function(element, attr) {
       var fn = $parse(attr.sirTap, /* interceptorFn */ null, /* expensiveChecks */ true);
       return function ngEventHandler(scope, element) {
         var click = true;
         element.on('click', function(event) {
           if (click){
             var callback = function() {
               fn(scope, {$event:event});
             };
           scope.$apply(callback);
           }  
         });

         element.on('touchstart mousedown', function(){
           click = true;
         });

         element.on('touchmove mousemove', function(){
           click = false;
         });
       };
     }
   };
 }])
revolunet commented 8 years ago

Hi ! Thanks for reporting !

sorry i can't maintain this lib anymore but if someone is motivated, i can give contributors access after a first PR :)