[英]how to get long press event in angular js?
I am trying to get long press event in angular js .I found the solution from here https://gist.github.com/BobNisco/9885852 But I am not able to get log on console .here is my code. 我试图在角度js中获得长按事件。我从这里找到了解决方案https://gist.github.com/BobNisco/9885852但是我无法登录控制台。我的代码是。 http://goo.gl/ZpDeFz could you please tell me where i am getting wrong .. http://goo.gl/ZpDeFz你能不能告诉我哪里出错了..
$scope.itemOnLongPress = function(id) {
console.log('Long press');
}
$scope.itemOnTouchEnd = function(id) {
console.log('Touch end');
}
Your code is not working because the directive binds to the elements touchstart
and touchend
events which you're probably not using if you're testing in a browser. 您的代码无效,因为该指令绑定到元素touchstart
和touchend
事件,如果您在浏览器中进行测试,则可能没有使用touchend
事件。
When I changed them to mousedown
and mouseup
your script worked fine on my computer's browser. 当我将它们更改为mousedown
和mouseup
你的脚本在我的计算机浏览器上工作正常。
app.directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('mousedown', function(evt) { // <-- changed
/* ... */
});
$elm.bind('mouseup', function(evt) { // <-- changed
/* ... */
});
}
};
})
It is a good implementation: 这是一个很好的实现:
// pressableElement: pressable-element
.directive('pressableElement', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $elm, $attrs) {
$elm.bind('mousedown', function (evt) {
$scope.longPress = true;
$scope.click = true;
// onLongPress: on-long-press
$timeout(function () {
$scope.click = false;
if ($scope.longPress && $attrs.onLongPress) {
$scope.$apply(function () {
$scope.$eval($attrs.onLongPress, { $event: evt });
});
}
}, $attrs.timeOut || 600); // timeOut: time-out
// onTouch: on-touch
if ($attrs.onTouch) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouch, { $event: evt });
});
}
});
$elm.bind('mouseup', function (evt) {
$scope.longPress = false;
// onTouchEnd: on-touch-end
if ($attrs.onTouchEnd) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouchEnd, { $event: evt });
});
}
// onClick: on-click
if ($scope.click && $attrs.onClick) {
$scope.$apply(function () {
$scope.$eval($attrs.onClick, { $event: evt });
});
}
});
}
};
})
Usage example: 用法示例:
<div pressable-element
ng-repeat="item in list"
on-long-press="itemOnLongPress(item.id)"
on-touch="itemOnTouch(item.id)"
on-touch-end="itemOnTouchEnd(item.id)"
on-click="itemOnClick(item.id)"
time-out="600"
>{{item}}</div>
var app = angular.module('pressableTest', []) .controller('MyCtrl', function($scope) { $scope.result = '-'; $scope.list = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 } ]; $scope.itemOnLongPress = function (id) { $scope.result = 'itemOnLongPress: ' + id; }; $scope.itemOnTouch = function (id) { $scope.result = 'itemOnTouch: ' + id; }; $scope.itemOnTouchEnd = function (id) { $scope.result = 'itemOnTouchEnd: ' + id; }; $scope.itemOnClick = function (id) { $scope.result = 'itemOnClick: ' + id; }; }) .directive('pressableElement', function ($timeout) { return { restrict: 'C', // only matches class name link: function ($scope, $elm, $attrs) { $elm.bind('mousedown', function (evt) { $scope.longPress = true; $scope.click = true; $scope._pressed = null; // onLongPress: on-long-press $scope._pressed = $timeout(function () { $scope.click = false; if ($scope.longPress && $attrs.onLongPress) { $scope.$apply(function () { $scope.$eval($attrs.onLongPress, { $event: evt }); }); } }, $attrs.timeOut || 600); // timeOut: time-out // onTouch: on-touch if ($attrs.onTouch) { $scope.$apply(function () { $scope.$eval($attrs.onTouch, { $event: evt }); }); } }); $elm.bind('mouseup', function (evt) { $scope.longPress = false; $timeout.cancel($scope._pressed); // onTouchEnd: on-touch-end if ($attrs.onTouchEnd) { $scope.$apply(function () { $scope.$eval($attrs.onTouchEnd, { $event: evt }); }); } // onClick: on-click if ($scope.click && $attrs.onClick) { $scope.$apply(function () { $scope.$eval($attrs.onClick, { $event: evt }); }); } }); } }; })
li { cursor: pointer; margin: 0 0 5px 0; background: #FFAAAA; } .pressable-element { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; }
<div ng-app="pressableTest"> <div ng-controller="MyCtrl"> <ul> <li ng-repeat="item in list" class="pressable-element" on-long-press="itemOnLongPress(item.id)" on-touch="itemOnTouch(item.id)" on-touch-end="itemOnTouchEnd(item.id)" on-click="itemOnClick(item.id)" time-out="600" >{{item.id}}</li> </ul> <h3>{{result}}</h3> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
JSFiddle: https://jsfiddle.net/reduardo7/u47ok38e/ JSFiddle: https ://jsfiddle.net/reduardo7/u47ok38e/
Based on: https://gist.github.com/BobNisco/9885852 基于: https : //gist.github.com/BobNisco/9885852
Go through the below URL for the angular directive and the implementation approaches, 通过以下URL获取angular指令和实现方法,
Source code for long press Directive: 长按指令的源代码:
// Add this directive where you keep your directives
.directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$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;
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function() {
$scope.$eval($attrs.onTouchEnd)
});
}
});
}
};
})
Your HTML Should be like this: 你的HTML应该是这样的:
<ion-item ng-repeat="item in list" on-long-press="itemOnLongPress(item.id)" on-touch-end="itemOnTouchEnd(item.id)">
{{ item }}
</ion-item>
Controller JS functions to make the definitions that you would prefer: Controller JS用于制作您希望的定义:
$scope.itemOnLongPress = function(id) {
console.log('Long press');
}
$scope.itemOnTouchEnd = function(id) {
console.log('Touch end');
}
https://gist.github.com/BobNisco/9885852 https://gist.github.com/BobNisco/9885852
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.