click、touch，mouse事件的优先级

最新推荐文章于 2024-08-10 14:00:00 发布

原创最新推荐文章于 2024-08-10 14:00:00 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Javascript 专栏收录该内容

8 篇文章

订阅专栏

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

问题：一个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>