uni-app事件处理

最新推荐文章于 2025-07-15 21:36:08 发布

weixin_46353442

最新推荐文章于 2025-07-15 21:36:08 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_46353442/article/details/104837054

本文介绍了uni-app中事件监听、事件处理方法、事件修饰符的使用，包括.v-on指令、事件处理逻辑、DOM事件的访问，以及不同修饰符如.stop、.prevent等的功能和平台兼容性说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div>
		<button v-on:click="counter += 1"> 数值 :  {{ counter }} </button>
		//每点击该按钮 数值将会增加1
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		counter: 0//给counter赋值
	},
	methods:{
	}
});
</script>
<style type="text/css">
</style>
</body>
</html>

运行结果：
在这里插入图片描述

二、事件处理方法

许多事件处理逻辑会较为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div>
		<button v-on:click="greet('abc', $event)">Greet</button>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
	},
	methods:{
		greet : function (str, e) {
			alert(str);
			console.log(e);//控制台打印
		}
	}
});
</script>
<style type="text/css">
</style>
</body>
</html>

效果：
在这里插入图片描述
点击该按钮效果：

打印台：

三、事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

可自行测试下列事件：

<!-- 阻止单击事件继续 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<div v-on:scroll.passive="onScroll">...</div>

选自vue.js文档
v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

四、按键修饰符：

uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。、

事件映射表

左侧为 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'
}

注意：

为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
事件修饰符

.stop：各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为 .prevent 仅在 H5 平台支持
.self：仅在 H5 平台支持
.once：仅在 H5 平台支持
.capture：仅在 H5 平台支持
.passive：仅在 H5平台支持

选自：uni-app官网介绍