18910140161

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

顺晟科技

2021-07-09 10:32:28

146

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

1.自定义指令

   
.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);

             }

         }]

     }

 })

2.HTML页面上调用

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

3.在controller,js 中写startTouch,endTouch的方法逻辑

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航