javascript - How to handle long click event in angular for mobile? - Stack Overflow

admin管理员组

文章数量:1323707

I want to achieve a simple long click (long press) event with angular, working on mobile devices also.

Live code

WORKING ON

1. Chrome - desktop
2. Chrome mobile inspector

NOT WORKING ON

1. iOS ( chrome / safari ) - real device
2. Android ( chrome ) - real device

HTML

<div class="container-fluid" ng-app="app" ng-controller="MainCtrl">
  <center>
    <h3 ng-bind="test"></h3>
    <div class="box noselect"
         on-long-press="itemOnLongPress()"
         on-touch-end="itemOnTouchEnd()">
      <span>Document</span>
    </div>
  </center>
</div>

JAVASCRIPT

angular.module('app',[])
  .directive('onLongPress', function($timeout) {
    return {
      restrict: 'A',
      link: function($scope, $elm, $attrs) {
        $elm.bind('mousedown', function(evt) {
          // Locally scoped variable that will keep track of the long press
        $scope.longPress = true;

        // We'll set a timeout for 600 ms for a long press
        $timeout(function() {
          if ($scope.longPress) {
            // If the touchend event hasn't fired,
            // apply the function given in on the element's on-long-press attribute
            $scope.$apply(function() {
              $scope.$eval($attrs.onLongPress)
                    });
                }
            }, 600);
        });

        $elm.bind('mouseup', function(evt) {
          // Prevent the onLongPress event from firing
          $scope.longPress = false;
          // If there is an on-touch-end function attached to this element, apply it
          if ($attrs.onTouchEnd) {
            $scope.$apply(function() {
              $scope.$eval($attrs.onTouchEnd)
                });
            }
      });
    }
  };
})

.controller('MainCtrl', function($scope){
  $scope.test = 'Angular 1.4.7';
  $scope.itemOnLongPress = function(){
    $scope.test = "Long pressed";
  };
  $scope.itemOnTouchEnd = function(){
    $scope.test = "Touch end";
  };
});

CSS

.box{
  width:300px;
  height:300px;
  background:black;
  color:#fff;
  font-size:20px;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                              not supported by any browser */
}

I want to achieve a simple long click (long press) event with angular, working on mobile devices also.

Live code

WORKING ON

1. Chrome - desktop
2. Chrome mobile inspector

NOT WORKING ON

1. iOS ( chrome / safari ) - real device
2. Android ( chrome ) - real device

HTML

<div class="container-fluid" ng-app="app" ng-controller="MainCtrl">
  <center>
    <h3 ng-bind="test"></h3>
    <div class="box noselect"
         on-long-press="itemOnLongPress()"
         on-touch-end="itemOnTouchEnd()">
      <span>Document</span>
    </div>
  </center>
</div>

JAVASCRIPT

angular.module('app',[])
  .directive('onLongPress', function($timeout) {
    return {
      restrict: 'A',
      link: function($scope, $elm, $attrs) {
        $elm.bind('mousedown', function(evt) {
          // Locally scoped variable that will keep track of the long press
        $scope.longPress = true;

        // We'll set a timeout for 600 ms for a long press
        $timeout(function() {
          if ($scope.longPress) {
            // If the touchend event hasn't fired,
            // apply the function given in on the element's on-long-press attribute
            $scope.$apply(function() {
              $scope.$eval($attrs.onLongPress)
                    });
                }
            }, 600);
        });

        $elm.bind('mouseup', function(evt) {
          // Prevent the onLongPress event from firing
          $scope.longPress = false;
          // If there is an on-touch-end function attached to this element, apply it
          if ($attrs.onTouchEnd) {
            $scope.$apply(function() {
              $scope.$eval($attrs.onTouchEnd)
                });
            }
      });
    }
  };
})

.controller('MainCtrl', function($scope){
  $scope.test = 'Angular 1.4.7';
  $scope.itemOnLongPress = function(){
    $scope.test = "Long pressed";
  };
  $scope.itemOnTouchEnd = function(){
    $scope.test = "Touch end";
  };
});

CSS

.box{
  width:300px;
  height:300px;
  background:black;
  color:#fff;
  font-size:20px;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                              not supported by any browser */
}

• javascript
• angularjs
• mobile
• cross-platform

Share Improve this question Follow edited Jun 14, 2016 at 16:57 Omar 31.7k99 gold badges7272 silver badges116116 bronze badges asked Jun 14, 2016 at 10:21 que1326que1326 2,32544 gold badges4343 silver badges5959 bronze badges 1

• You need to use touchstart and touchend instead of mousedown and mouseup. – gevorg Commented Jun 14, 2016 at 11:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to use touchstart and touchend instead Long Press in JavaScript?

$elm.bind('touchstart', function(evt) {
    // Locally scoped variable that will keep track of the long press
    $scope.longPress = true;

    // We'll set a timeout for 600 ms for a long press
    $timeout(function() {
        if ($scope.longPress) {
            // If the touchend event hasn't fired,
            // apply the function given in on the element's on-long-press attribute
            $scope.$apply(function() {
                $scope.$eval($attrs.onLongPress)
            });
        }
    }, 600);
});

$elm.bind('touchend', function(evt) {
    // Prevent the onLongPress event from firing
    $scope.longPress = false;

本文标签： javascriptHow to handle long click event in angular for mobileStack Overflow