這兩天學習了AngularJS手勢事件感覺這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
長按 : on-hold
在屏幕同一位置按住超過500ms，將觸發on-hold事件：
你可以在任何元素上使用這個指令掛接監聽函數：
<any on-hold=“…”>…</any>
示例代碼：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-hold=”show_delete();”>
<h1 class=”title”>on-hold</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item>
{{item}}
<ion-delete-button class=”ion-minus-circled”></ion-delete-button>
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class=”bar-positive”></ion-footer-bar>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
};
});
敲擊 : on-tap
在屏幕上快速點擊一次（停留時間不超過250ms），將觸發on-tap事件：
可以在任何元素上使用這個指令掛接事件監聽函數：
<any on-tap=“…”>…</any>
示例代碼：
<head>
<meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”>
<script src=”ionic.bundle.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”ionic.min.css”>
</head>
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-tap</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item on-tap=”show(item);”>
{{item}}
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicPopup) {
$scope.items=[“England”,”Japan”,”India”,”Russian”];
$scope.show = function(item){
$ionicPopup.alert({
title : “警告!”,
template : “為什么要敲 “+ item + “?”
});
};
});
雙擊 : on-double-tap
在屏幕上快速敲擊兩次，將觸發on-double-tap事件：
可以在任何元素上使用這個指令掛接事件監聽函數：
<any on-double-tap=“…”>…</any>
示例代碼：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-double-tap=”title='I am double tapped!'”>
<h1 class=”title”>{{title}}</h1>
</ion-header-bar>
<ion-content>
<p ng-include=”‘txt/xiyouji.txt'”></p>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
});
按下/松開 on-touch/on-release
在屏幕上按下手指或鼠標鍵時，會立即觸發on-touch事件；當手指抬起或鼠標鍵松開時， 會立即觸發on-release事件。
可以在任何元素上掛接響應的事件監聽函數：
<any on-touch=“…” on-release=“…”>…</any>
示例代碼：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive” ng-class=”[style]” on-touch=”style='bar-assertive'” on-release=”style='bar-positive'”> <h1 class=”title”>on-touche/on-release</h1> </ion-header-bar> <ion-content> <img src=”img/0021.png”> </ion-content> </body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});
拖拽 : on-drag
在屏幕上按住并移動時，觸發on-drag拖拽事件：
根據運動方向的不同，可以細分為以下幾種事件：
可以在任意元素上使用這些指令掛接對應的事件監聽函數：
<any on-drag=“…”>…</any>
示例代碼：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive”> <h1 class=”title”>on-drag</h1> </ion-header-bar> <div class=”scroll-content has-header padding”> <img src=”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”> </div> </body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
var ox,oy;
$scope.onTouch = function($event){
ox = $event.target.offsetLeft;
oy = $event.target.offsetTop;
};
$scope.onDrag = function($event){
var el = $event.target,
dx = $event.gesture.deltaX,
dy = $event.gesture.deltaY;
el.style.left = ox + dx + “px”;
el.style.top = oy + dy + “px”;
};
});劃動 : on-swipe
在屏幕上按住并快速拖動時，將觸發on-swipe劃動事件：
根據劃動方向的不同，可細分為以下指令：
可以在任何元素上使用這些指令掛接事件監聽函數：
<any on-swipe=“…”>…</any>
示例代碼：
<body ng-controller=”ezCtrl”>
<div class=”scroll-content padding”
on-swipe-up=”onSwipeUp()”
on-swipe-down=”onSwipeDown()”
on-swipe-left=”onSwipeLeft()”
on-swipe-right=”onSwipeRight()”>
<p class=”padding”>按住鼠標快速劃！</p>
<i class=”icon {{icon}}”></i>
</div>
</body>js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope){
$scope.icon=”ion-arrow-expand”;
$scope.onSwipeUp = function(){
$scope.icon=”ion-arrow-up-a”;
};
$scope.onSwipeDown = function(){
$scope.icon=”ion-arrow-down-a”;
};
$scope.onSwipeLeft = function(){
$scope.icon=”ion-arrow-left-a”;
};
$scope.onSwipeRight = function(){
$scope.icon=”ion-arrow-right-a”;
};
});
腳本接口 : $ionicGesture
除了使用之前介紹的特定指令實現手勢事件的監聽，也可以使用$ionicGesture服務 注冊/解除手勢事件監聽：
on(eventType,callback,$element,options) – 注冊手勢事件監聽函數
參數eventType是支持的事件類型，參看下面介紹；參數callback指定監聽函數； 參數$element是要綁定事件的jqLite元素。
on()方法返回的是一個ionic.gesture對象，可供解除監聽用。
off(gesture,eventType,callback) – 解除手勢事件監聽函數
參數gesture是on()方法返回的結果對象，參數callback是要移除的監聽函數。
$ionicGesture服務支持的事件類型有：
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release
示例代碼：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive”> <h1 class=”title”>$ionicGesture</h1> </ion-header-bar> <ion-content class=”padding”> <button class=”button” id=”test”>test</button> </ion-content> </body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {
var el = document.querySelector(“#test”);
$ionicGesture.on(“tap”,function(){
$ionicPopup.alert({
title : “提醒”,
template : “這個監聽是用$ionicGesture服務注冊的！”
})
},angular.element(el));
});聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
