如何使用角指令处理单个HTML元素上的多个触摸事件
如何使用角指令处理单个HTML元素上的多个触摸事件
提问于 2013-02-18 02:08:44
在我的移动应用程序中，我使用HTML显示内容的主视图：
<div class="imageView" na-swipe="next()" na-tap="showControls()"> content here </div>为了使用swipe (或Hammer.js)处理jQuery和touch事件，我创建了以下两个指令：
angular.module("naModule").directive 'naTap', ->
(scope, element, attrs) ->
tapping = false
element.bind 'touchstart', -> tapping = true
element.bind 'touchmove', -> tapping = false
element.bind 'touchend', -> scope.$apply(attrs['naTap']) if tapping
angular.module("naModule").directive 'naSwipe', ->
(scope, element, attrs) ->
tapping = false
swiping = false
element.bind 'touchstart', -> tapping = true
element.bind 'touchmove', -> swiping = true
element.bind 'touchend', -> scope.$apply(attrs['naSwipe']) if (swiping and tapping)naSwipe似乎工作得很好，也就是说，每当滑动是performed...However时，就调用next()，当我点击next()和showControls()都在启动时，如何在这个div?上干净地分开触摸和滑动。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-19 03:32:47
我认为您正在以错误的方式处理这个用例。
考虑使用一个指令，模板是您描述的标记，并定义要在该指令的link()函数中捕获的事件。
类似于以下指令：
angular.module('naModule').directive('imageView', function() {
return {
restrict: 'E',
replace: true,
scope: {
// As required for your content ...
},
template: '<div class="imageView"> content here </div>',
controller: function($scope, $attrs) {
$scope.next = function() {
// handle function..
}
$scope.showControls = function() {
// handle function..
}
},
link: function(scope, element, attrs, controller) {
element.bind('touchstart', function(e) {
scope.tapping = true;
scope.swiping = true;
}
element.bind('touchmove', function(e) {
scope.tapping = false;
scope.swiping = true;
}
element.bind('touchend', function(e) {
if(scope.tapping) {
scope.next();
} else {
scope.showControls();
}
}
}
}
});Stack Overflow用户
发布于 2013-02-19 15:31:41
在某个地方，您需要将swiping重置为false。这可能应该作为touchstart回调的一部分来完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14928485
复制相关文章
相似问题
腾讯云开发者
