logo标签列表

Angular的ngTouch库能用来检测长按点击（触摸/保持/释放在原地）事件吗？

angularjsangularjs-ng-clicklong-click
7
我的AngularJS应用程序需要能够检测触摸事件的开始和结束（不是滑动）。例如，当用户按下并保持手指时，我需要执行某些逻辑，并在同一触摸结束时（用户移除手指）执行不同的逻辑。我正在考虑实现ngTouch来完成这个任务，但是ngTouch.ngClick指令的文档只提到了在轻击时触发事件。ngTouch.$swipe服务可以检测触摸事件的开始和结束，但仅当用户实际上在触摸时水平或垂直移动手指时才能检测。有人有任何想法吗？我需要编写自己的指令吗？
3个回答
13

更新于11/25/14：

目前等宽角锤子库已经过时，因此Hammer.js团队建议使用Ryan Mullins版本，该版本是基于Hammer v2.0+构建的。

我研究了ngTouch，据我所知，在此写作时（版本1.2.0），它不支持除了单击和滑动之外的任何操作。因此，我选择了一个更成熟的多点触控库（hammer.js）和一个经过充分测试和维护的angular模块（angular-hammer），后者将hammer.js的所有多点触控功能作为属性指令公开。

https://github.com/monospaced/angular-hammer

7
因为此代码库是从一个旧的、不再积极维护的、不含版本标签的源代码库进行了fork，而且在我发表这篇文章的时候，也不支持bower。我调查了所有不同版本的代码，并且等宽字体版本是最好的选择。 - gregtzar
5
不确定为什么这么多人给此回答点了反对。如果其中一些人能够发表原因，这将是很好的，以便可以加以改进。我已经在多个企业/生产角度项目中使用此解决方案将近一年了，效果还不错。而现在ngTouch仍存在严重问题，并缺少对不同手势的支持。如果您知道任何更好的选择，请告诉我。 - gregtzar
是我给那个答案投了反对票。而且我已经评论了原因。虽然我同意你的回答是为了建议一个处理触摸事件的库，但我总是会给仓库的原始所有者以信用，除非有正当理由不这样做。 - Phương Nguyễn
7
这句话的意思是：这不是信誉的问题（有兴趣的人可以通过 GitHub 看到原始库是由谁开发的），而是提供一个当前/有效的库供使用。原始版本已经过时，我不会在生产中使用它，所以为什么要在这里向人们指出它呢？欢迎来到开源软件世界。另外，值得注意的是，几个其他人没有留下评论就将答案的赞成票抵消掉了。 - gregtzar
2
@Egg "FYI：有几个人在没有留下评论的情况下给答案投了反对票（抵消了赞成票）。" 欢迎来到stackoverflow :) - Umair
4

这是一个良好的实现：

// 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 });
                    });
                }
            });
        }
    };
})

使用示例：

<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: 'A',
        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;
}
<div ng-app="pressableTest">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in list"
                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>

基于：https://gist.github.com/BobNisco/9885852

这个代码片段演示了如何使用JavaScript从URL中获取参数。获取URL参数对于在IT技术领域的网页和应用程序开发非常重要。
该代码保留了HTML标签，具体实现请参考以上链接。
3
1
这是一些很好的信息，谢谢！我已经将其添加到答案中，以确保人们不会错过它。 - gregtzar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接