click: 'tap', 点击事件
touchstart: 'touchstart', 触摸事件
touchmove: 'touchmove', 触摸滑动
touchcancel: 'touchcancel', 触摸被取消
touchend: 'touchend', 触摸结束
tap: 'tap',
longtap: 'longtap',
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'
事件修饰符
注意: Vue中的事件修饰符在uni-app中有以下问题
stop-----------------使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效.
prevent-------------uni-app中基本没有什么默认事件,所以prevent阻止默认事件的行为基本上没用.
self------------------没有可以判断的标识
once----------------uni-app没有removeEventListner,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了意愿,暂不考虑
按键修饰符-------uni-app运行在智能手机端,没有键盘事件,所以不支持按键修饰符
事件绑定:与vue中的事件绑定一致,使用简写的 @
事件传参:与vue中事件传参基本一致,使用v-for
可以看如下示例,代码复制后,覆盖index.vue页面,看页面事件的触发
<template>
<view>
<view style="width: 100%; height: 150upx;"></view>
<input type="text" :value="title"
style="background-color: #007AFF;height: 100upx"
@input="change"
@focus="focus"
@blur="blur"
@confirm="confirm"
@click="click"
@tap="tap"
@longpress="longpress"
@touchstart="touchstart"
@touchend="touchend"
@touchmove="touchmove"
@touchcancel="touchcancel"
/>
<!-- 不推荐使用了, 请使用 longpress @longtap="longtap" -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
change(){
console.log("输入框改变")
},
focus(){
console.log("获得焦点")
},
blur(){
console.log("失去焦点")
},
confirm(){
console.log("点击完成按钮/回车键")
},
// 使用时 tap 和 click 只使用一个就好
click(){
console.log("单击事件")
},
tap(){
console.log("组件被触摸")
},
longpress(){
console.log("长时间按压")
},
//不推荐使用,请使用longpress
// longtap(){
// console.log("长时间触摸")
// }
touchstart(){
console.log("触摸开始")
},
touchend(){
console.log("触摸结束")
},
touchmove(){
console.log("手指移动")
},
//如打进电话, (暂时无法演示)
touchcancel(){
console.log("触摸被打断")
}
}
}
</script>
<style>
</style>
uniapp开发解决多次点击触发事件
1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下
// 处理多次点击
function dianji(fn) {
let that = this;
if (that.onoff) {
that.onoff = false;
fn();
setTimeout(function () {
that.onoff = true;
}, 1500)
} else {
console.log("请稍后点击")
}
}
export {
dianji
}
2.在main.js中引入然后挂载待vue原型上这样就可以全局使用了
import { dianji } from './common/common'
Vue.prototype.$dianji = dianji;
3.使用的时候
<view class="list-container" @click="$dianji(target)">
target:就是你需要触发的函数;