uniapp事件修饰符和事件映射名称
修饰符 (modifier) 是以半⾓句号 . 指明的特殊后缀,⽤于指出⼀个指令应该以特殊⽅式绑定。例如,.prevent 修饰符告诉 @事件对于触发的事件调⽤ event.preventDefault():
@事件(v-on)提供了事件修饰符:
.stop: 各平台均⽀持, 使⽤时会阻⽌事件冒泡,在⾮ H5 端同时也会阻⽌事件的默认⾏为
.native: 监听原⽣事件,各平台均⽀持
.prevent: 仅在 H5 平台⽀持
.capture: 仅在 H5 平台⽀持
.self: 仅在 H5 平台⽀持
.once: 仅在 H5 平台⽀持
.passive: 仅在 H5 平台⽀持
<!-- 阻⽌单击事件继续传播 -->
<view @click.stop="doThis"></view>
使⽤修饰符时,顺序很重要;相应的代码会以同样的顺序产⽣。因此,⽤ @click.prevent.self 会阻⽌所有的点击,
⽽ @click.self.prevent 只会阻⽌对元素⾃⾝的点击。
注意
为兼容各端,事件需使⽤ @ 的⽅式绑定,请勿使⽤⼩程序端的 bind 和 catch 进⾏事件绑定;也不能在 JS 中使
⽤event.preventDefault()和event.stopPropagation()⽅法;
若需要禁⽌蒙版下的页⾯滚动,可使⽤ @touchmove.stop.prevent="moveHandle",moveHandle 可以⽤来处理 touchmove 的事件,也可以是⼀个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
按键修饰符:uni-app 运⾏在⼿机端,没有键盘事件,所以不⽀持按键修饰符。
以下⼏个也是⽀持的
⿏标事件类型
事件类型说明
click 单击⿏标左键时发⽣,如果右键也按下则不会发⽣。当⽤户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件
blur事件dblclick 双击⿏标左键时发⽣,如果右键也按下则不会发⽣
mousedown 单击任意⼀个⿏标按钮时发⽣
mouseout ⿏标指针位于某个元素上且将要移出元素的边界时发⽣
mouseover ⿏标指针移出某个元素到另⼀个元素上时发⽣
mouseup 松开任意⼀个⿏标按钮时发⽣
mousemove ⿏标在某个元素上时持续发⽣
// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件 {
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap', //推荐使⽤longpress代替
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'
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论