​

  大家好~ 我是前端uio，本文主要介绍在JS（JavaScript）中，常见的点击事件（click）修饰符。 有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、基本介绍

1.概念

        在 JavaScript 中 Click 事件是一种常见的用户交互事件，表示用户在网页上点击某个元素的动作。当用户使用鼠标或在屏幕上点击某个元素时，Click 事件就会被触发。

2.使用场景

Click 事件广泛应用于各种网页交互设计中，例如：

• 按钮点击：用户点击按钮以执行特定的操作，如提交表单、打开新页面等。
• 链接点击：用户点击链接跳转到另一个页面或执行某些脚本。
• 图像点击：用户点击图片可能会放大查看、切换图片或触发其他动作。

 3.特殊情况

i）事件冒泡：Click事件通常会触发事件冒泡机制，即事件会从触发点向上传播到父元素，直到文档根节点。

ii）事件委托：在父元素上设置 Click 事件监听器，根据事件对象的 target 属性来判断是哪个子元素被点击，从而实现对子元素的事件进行统一处理。

二、常见的修饰符 

1.stop

        作用：阻止事件冒泡。当用户点击一个元素时，这个修饰符会阻止事件继续传播到父元素。

<div @click.stop="handleClick">点击我，不会影响父元素</div>

2.prevent

作用：阻止默认行为。例如，对于 <a> 标签，默认行为是导航到指定的URL，使用.prevent修饰符可以阻止这种行为。

例如，在设计手机验证码表单时，若没有设置该修饰符，点击发送验证码时，会触发表单的提交。

<form @submit.prevent="onSubmit">
  <input type="text" id="name" v-model="user.username"/>
  <button type="submit">保存</button>
</form>

3.self

作用：当事件目标本身与父级元素都绑定相同的事件时，只需要处理目标元素的情况。

<div @click.self="handleClick">点击我，不会影响子元素</div>

4.once

作用：只会触发一次。无论点击多少次，事件处理器都只会执行一次。

<button @click.once="handleClick">点击我，只触发一次</button>

5.passive

作用：指示事件处理程序不会调用 preventDefault() 。这个修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

<div @touchstart.passive="handleTouchStart">触摸开始</div>

6.capture

作用：添加事件侦听器时使用事件捕获模式，与事件冒泡的方向相反，事件捕获由外到内。

7.exact

作用：仅当事件目标是精确匹配的元素时才会触发事件处理器。

<div @click.exact="handleExactClick">点击我，只有当点击的是我自己</div>

8.ctrl

作用：只有当 Ctrl 键被按下时，事件才会被触发。

<div @click.ctrl="handleCtrlClick">按住Ctrl键点击我</div>

9.alt

作用：只有当 Alt 键被按下时，事件才会被触发。

<div @click.alt="handleAltClick">按住Alt键点击我</div>

 10.shift

作用：只有当 Shift 键被按下时，事件才会被触发。

<div @click.shift="handleShiftClick">按住Shift键点击我</div>

11.meta

作用：只有当 Meta 键被按下时，事件才会被触发。

<div @click.meta="handleMetaClick">按住Meta键点击我</div>

 三、总结与思考

1.修饰符可以单独使用，也可以组合使用，例如 @c lick.stop.prevent 会同时阻止事件冒泡和默认行为。

2.使用修饰符时，需要注意调用顺序，@click.prevent.stop 会阻止事件冒泡和事件的默认行为；@c lick.stop.prevent 先阻止默认行为再阻止冒泡事件。

​