admin管理员组文章数量:1323707
I want to achieve a simple long click (long press) event with angular, working on mobile devices also.
Live code
WORKING ON
- Chrome - desktop
- Chrome mobile inspector
NOT WORKING ON
- iOS ( chrome / safari ) - real device
- 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
- Chrome - desktop
- Chrome mobile inspector
NOT WORKING ON
- iOS ( chrome / safari ) - real device
- 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 */
}
Share
Improve this question
edited Jun 14, 2016 at 16:57
Omar
31.7k9 gold badges72 silver badges116 bronze badges
asked Jun 14, 2016 at 10:21
que1326que1326
2,3254 gold badges43 silver badges59 bronze badges
1
-
You need to use
touchstart
andtouchend
instead ofmousedown
andmouseup
. – gevorg Commented Jun 14, 2016 at 11:00
1 Answer
Reset to default 6You 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
版权声明:本文标题:javascript - How to handle long click event in angular for mobile? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742129718a2422104.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论