当前位置：首页 > uni-app

uniapp鼠标事件

2026-03-05 08:29:49uni-app

uniapp 鼠标事件处理

在 uniapp 中处理鼠标事件可以通过绑定事件监听器来实现，类似于传统网页开发中的事件处理方式。uniapp 支持常见的鼠标事件，如点击、长按、滑动等。

常用鼠标事件类型

@click：点击事件
@longpress：长按事件
@touchstart：触摸开始事件
@touchmove：触摸移动事件
@touchend：触摸结束事件
@mousedown：鼠标按下事件
@mouseup：鼠标抬起事件
@mousemove：鼠标移动事件

基本事件绑定

在模板中直接绑定事件处理函数：

<template>
  <view @click="handleClick" @longpress="handleLongPress">点击或长按我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件触发');
    },
    handleLongPress() {
      console.log('长按事件触发');
    }
  }
}
</script>

事件对象参数

事件处理函数可以接收事件对象参数，包含事件相关信息：

<template>
  <view @click="handleClickWithEvent">点击获取事件信息</view>
</template>

<script>
export default {
  methods: {
    handleClickWithEvent(event) {
      console.log('事件类型:', event.type);
      console.log('触发元素:', event.target);
      console.log('坐标位置:', {
        x: event.touches[0].clientX,
        y: event.touches[0].clientY
      });
    }
  }
}
</script>

阻止事件冒泡

使用 .stop 修饰符阻止事件冒泡：

<template>
  <view @click="outerClick">
    外层
    <view @click.stop="innerClick">内层(不会触发外层点击)</view>
  </view>
</template>

事件修饰符

uniapp 支持多种事件修饰符：

.stop：阻止事件冒泡
.prevent：阻止默认行为
.capture：使用捕获模式
.self：只有当事件是从侦听器绑定的元素本身触发时才触发回调
.once：只触发一次回调

<view @click.once="handleOnceClick">只会触发一次的点击</view>

自定义组件事件

对于自定义组件，可以通过 $emit 触发事件：

<template>
  <custom-button @custom-click="handleCustomClick"></custom-button>
</template>

<script>
export default {
  methods: {
    handleCustomClick(data) {
      console.log('自定义事件触发:', data);
    }
  }
}
</script>

在自定义组件内部：

this.$emit('custom-click', { message: '来自子组件的数据' });

鼠标移动跟踪示例

实现一个跟随鼠标移动的元素：

uniapp鼠标事件

<template>
  <view 
    @mousemove="handleMouseMove"
    style="height: 500px; background: #eee; position: relative;"
  >
    <view 
      :style="{ 
        position: 'absolute',
        left: position.x + 'px',
        top: position.y + 'px',
        width: '50px',
        height: '50px',
        background: 'red'
      }"
    ></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 }
    };
  },
  methods: {
    handleMouseMove(event) {
      this.position = {
        x: event.clientX - 25,
        y: event.clientY - 25
      };
    }
  }
}
</script>