angularJS 实现移动端触摸事件Touchstart Touchmove

最新推荐文章于 2025-02-28 21:29:36 发布

阿早

最新推荐文章于 2025-02-28 21:29:36 发布

阅读量5.4k

点赞数 1

分类专栏： angularJS 文章标签： angular 移动端

本文链接：https://blog.youkuaiyun.com/qq_33460562/article/details/78123234

版权

angularJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在AngularJS移动端开发中，如何使用ngTouchstart和ngTouchmove事件来实现触屏交互。通过在app.js中引入相关模块，并在控制器中定义startTouch()和endTouch()方法，可以轻松处理触摸开始和结束事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular 移动端开发，启用ngTouchstart,ngTouchmove,ngTouchend

app.js引用

   .directive("ngTouchstart", function () {
        return {
            controller: ["$scope", "$element", function ($scope, $element) {

                $element.bind("touchstart", onTouchStart);
                function onTouchStart(event) {
                    var method = $element.attr("ng-touchstart");
                    $scope.$apply(method);
                }

            }]
        }
    })
    .directive("ngTouchmove", function () {
        return {
            controller: ["$scope", "$element", function ($scope, $element) {

                $element.bind("touchstart", onTouchStart);
                function onTouchStart(event) {
                    event.preventDefault();
                    $element.bind("touchmove", onTouchMove);
                    $element.bind("touchend", onTouchEnd);
                }
                function onTouchMove(event) {
                    var method = $element.attr("ng-touchmove");
                    $scope.$apply(method);
                }
                function onTouchEnd(event) {
                    event.preventDefault();
                    $element.unbind("touchmove", onTouchMove);
                    $element.unbind("touchend", onTouchEnd);
                }

            }]
        }
    })
    .directive("ngTouchend", function () {
        return {
            controller: ["$scope", "$element", function ($scope, $element) {

                $element.bind("touchend", onTouchEnd);
                function onTouchEnd(event) {
                    var method = $element.attr("ng-touchend");
                    $scope.$apply(method);
                }

            }]
        }
    })

页面调用

<div class="article" ng-touchstart="startTouch()" ng-touchend="endTouch()">

在controller 直接写 startTouch() 和endTouch()完成事件

angularJS 实现移动端 触摸事件Touchstart Touchmove

angularJS 实现移动端触摸事件Touchstart Touchmove