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

缺乏、安全感 2022-06-08 14:39 384阅读 0赞

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

1.  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);
                    }
    
                }]
            }
        })

1.  页面调用

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