首页 > 技术文章 > uni-app相关事件处理器

huihuihero 2020-05-25 11:02 原文

// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
    touchstart: 'touchstart',   //手指触摸动作开始
    touchmove: 'touchmove',   //手指触摸后移动
    touchcancel: 'touchcancel',   //手指触摸动作被打断,如来电提醒,弹窗
    touchend: 'touchend',   //手指触摸动作结束
    click: 'tap',   //手指触摸后马上离开
    longtap: 'longtap',   //手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
    暂无:'longpress',   //手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
    input: 'input',   //输入框发生变化时触发
    change: 'change',   //当输入框失焦的时候触发
    submit: 'submit',
    blur: 'blur',   //失去焦点时触发
    focus: 'focus',   //获得焦点时触发
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}


注:
1、为兼容各端,在Uni-app中事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
2、在uni-app中,事件修饰符仅.stop在各平台均支持,使用时会阻止事件冒泡。其余如.prevent、.self、.once、.capture、.passive均仅在H5平台支持
3、若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

推荐阅读