uniapp鼠标事件
uniapp 鼠标事件处理
在 uniapp 中处理鼠标事件的方式与传统的网页开发有所不同，因为 uniapp 主要面向移动端和跨平台开发。不过在某些场景下（如 H5 平台），仍然可以使用鼠标事件。
常用鼠标事件类型
-
点击事件
@click：单击事件@dblclick：双击事件（仅 H5 平台支持）
-
鼠标移动事件
@mousemove：鼠标移动时触发@mouseover：鼠标进入元素时触发@mouseout：鼠标离开元素时触发@mousedown：鼠标按下时触发@mouseup：鼠标释放时触发
事件对象属性
鼠标事件对象包含以下常用属性：
clientX/clientY：鼠标相对于视口的坐标pageX/pageY：鼠标相对于页面的坐标target：触发事件的元素
示例代码
<template>
<view>
<!-- 单击事件示例 -->
<button @click="handleClick">点击我</button>
<!-- 鼠标移动事件示例（H5平台） -->
<view
@mousemove="handleMouseMove"
style="width: 200px; height: 200px; background-color: #f0f0f0;"
>
鼠标移动区域
</view>
</view>
</template>
<script>
export default {
methods: {
handleClick(event) {
console.log('点击事件触发', event)
uni.showToast({
title: '点击事件触发',
icon: 'none'
})
},
handleMouseMove(event) {
console.log('鼠标位置:', event.clientX, event.clientY)
}
}
}
</script>注意事项
-
鼠标事件在非 H5 平台可能不被支持或表现不一致，建议优先使用触摸事件（如
@touchstart、@touchmove等）进行跨平台开发。 -
如果需要兼容多平台，可以使用条件编译：
<!-- #ifdef H5 --> <view @mousemove="handleMouseMove"></view> <!-- #endif --> -
在需要精确控制鼠标行为的场景下，可以考虑使用第三方库或自定义手势识别。
-
对于拖拽等复杂交互，推荐使用 uniapp 的
movable-view组件而非直接监听鼠标事件。
