1# 手势事件 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9手势表示由单个或多个事件识别的语义动作（例如：触摸、点击和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有： 10 11**触摸** 12- touchstart：手指触摸动作开始。 13 14- touchmove：手指触摸后移动。 15 16- touchcancel：手指触摸动作被打断，如来电提醒、弹窗。 17 18- touchend：手指触摸动作结束。 19 20**点击** 21 22click：用户快速轻敲屏幕。 23 24**长按** 25 26longpress：用户在相同位置长时间保持与屏幕接触。 27 28具体的使用示例如下： 29 30```html 31<!-- xxx.hml --> 32<div class="container"> 33 <div class="text-container" onclick="click"> 34 <text class="text-style">{{onClick}}</text> 35 </div> 36 <div class="text-container" ontouchstart="touchStart"> 37 <text class="text-style">{{touchstart}}</text> 38 </div> 39 <div class="text-container" ontouchmove="touchMove"> 40 <text class="text-style">{{touchmove}}</text> 41 </div> 42 <div class="text-container" ontouchend="touchEnd"> 43 <text class="text-style">{{touchend}}</text> 44 </div> 45 <div class="text-container" ontouchcancel="touchCancel"> 46 <text class="text-style">{{touchcancel}}</text> 47 </div> 48 <div class="text-container" onlongpress="longPress"> 49 <text class="text-style">{{onLongPress}}</text> 50 </div> 51</div> 52``` 53 54```css 55/* xxx.css */ 56.container { 57 width: 100%; 58 height: 100%; 59 flex-direction: column; 60 justify-content: center; 61 align-items: center; 62} 63.text-container { 64 margin-top: 30px; 65 flex-direction: column; 66 width: 600px; 67 height: 70px; 68 background-color: #0000FF; 69} 70.text-style { 71 width: 100%; 72 line-height: 50px; 73 text-align: center; 74 font-size: 24px; 75 color: #ffffff; 76} 77``` 78 79```js 80// xxx.js 81export default { 82 data: { 83 touchstart: 'touchstart', 84 touchmove: 'touchmove', 85 touchend: 'touchend', 86 touchcancel: 'touchcancel', 87 onClick: 'onclick', 88 onLongPress: 'onLongPress', 89 }, 90 touchCancel: function (event) { 91 console.info('event is', JSON.stringify(event)); 92 this.touchcancel = 'canceled'; 93 }, 94 touchEnd: function(event) { 95 console.info('event is', JSON.stringify(event)); 96 this.touchend = 'ended'; 97 }, 98 touchMove: function(event) { 99 console.info('event is', JSON.stringify(event)); 100 this.touchmove = 'moved'; 101 }, 102 touchStart: function(event) { 103 console.info('event is', JSON.stringify(event)); 104 this.touchstart = 'touched'; 105 }, 106 longPress: function() { 107 this.onLongPress = 'longPressed'; 108 }, 109 click: function() { 110 this.onClick = 'clicked'; 111 }, 112} 113``` 114 115
