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