很多时候,我们会用 AngularJS 开发移动端页面,制作移动端页面肯定是离不开,touchstart , touchmove , touchend 这些动作,但是AngularJS 提供的ng-touch 模块并不是ngtouchstart 这种触屏事件,使点击延迟了,所以今天介绍的是由 国外人员写的另一个ng-touch ,实现移动端的touchstart,touchmove,touchend 这些事件

使用方式,照旧,引入以下代码,然后再注入这个模块 ngTouch ,只需要把 ng-click 改成 ng-touchstart 就可以了

"use strict";

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

            $element.bind("touchstart", onTouchStart);
            function onTouchStart(event) {
                var method = $element.attr("ng-touchstart");
                $scope.$event = event;
                $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.$event = event;
                $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.$event = event;
                $scope.$apply(method);
            }

        }]
    }
});

 

  

相关文章:

  • 2022-01-13
  • 2022-12-23
  • 2021-06-12
  • 2022-01-15
  • 2021-11-29
  • 2021-07-07
  • 2021-12-08
  • 2022-02-25
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-12-21
  • 2021-07-22
  • 2021-06-06
  • 2021-10-05
  • 2021-12-17
相关资源
相似解决方案