如何處理移動中的長角度事件？

Question

我想用角度實現簡單的長按（長按）事件，也可以在移動設備上工作。

Live code

工作

1. 瀏覽器 - 桌面
2. Chrome行動督察

不工作

1. 的iOS（鉻/狩獵） - 真實設備
2. 的Android（鉻） - 真實設備

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 */ 
} 

Answer 1

您需要使用touchstart和touchend代替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;