click、touch，mouse事件的优先级

最新推荐文章于 2025-04-01 16:53:48 发布

Celester_best

最新推荐文章于 2025-04-01 16:53:48 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/Celester_best/article/details/123341365

Javascript 专栏收录该内容

8 篇文章

订阅专栏

当DOM元素同时绑定click、touch和mouse事件时，事件触发的优先级是怎样的？在移动端，touchstart先于touchend和click触发，而移动端长按不会触发click。在PC端，mousedown先于click发生。

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

问题：一个DOM元素同时绑定click、touch、mouse(以mousedown为例)事件时，事件的优先级是怎样的？

首先需要注意的是，pc端没有touch事件，所以在pc端不会响应touchstart、touchmove、touchend事件。在移动端，可以响应touchstart、touchmove、touchend事件。

pc端的事件优先级

mousedown事件→click事件

移动的事件优先级

点击

touchstart→touchend→click

按住之后不松开，并移动，最后松开

touchstart→touchmove→touchend

ps:长按时，并不会响应click事件

测试代码

<template>
  <div>
    <div
      class="click-touch-wrap"
      @click="clickEvent()"
      @touchstart="touchStart()"
      @touchmove="touchMove()"
      @touchend="touchEnd()"
      @mousedown="mousedown()"
    >
      测试
    </div>
  </div>
</template>
<script>
export default {
  name: "ClickAndTouch",
  methods: {
    clickEvent() {
      console.log("click 事件");
    },
    touchStart() {
      console.log("touchstart 事件");
    },
    touchMove() {
      console.log("touchmove 事件");
    },
    touchEnd() {
      console.log("touchend 事件");
    },
    mousedown() {
      console.log("mousedown 事件");
    },
  },
};
</script>
<style scoped>
.click-touch-wrap {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
</style>