贵州建设厅考试网站准考证下载,登陆插件wordpress,合肥做网站建设,深圳网站建设yihe kjVue 事件修饰符详解
事件修饰符是 Vue 中处理 DOM 事件细节的强大工具。下面我将通过一个交互式示例全面解析各种事件修饰符的用法和原理。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta name!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 事件修饰符详解/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/scriptstyle* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #2c3e50;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 30px 0;margin-bottom: 30px;}h1 {font-size: 2.8rem;margin-bottom: 15px;color: #34495e;}.subtitle {color: #7f8c8d;font-size: 1.3rem;max-width: 800px;margin: 0 auto;}.card {background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;margin-bottom: 30px;}.card-header {margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #f0f4f8;display: flex;align-items: center;gap: 15px;}.card-header h2 {font-size: 1.8rem;color: #2c3e50;}.modifier-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 25px;margin: 30px 0;}.modifier-card {background: #f8fafc;border-radius: 10px;padding: 25px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;}.modifier-card:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}.modifier-card h3 {color: #2c3e50;margin-bottom: 15px;display: flex;align-items: center;gap: 10px;}.modifier-card h3 .icon {background: #42b983;color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;}.code-block {background: #2d2d2d;color: #f8f8f2;padding: 15px;border-radius: 8px;font-family: Fira Code, monospace;font-size: 14px;margin: 15px 0;overflow-x: auto;}.demo-area {background: white;padding: 25px;border-radius: 10px;margin-top: 20px;border: 1px solid #e2e8f0;}.demo-container {display: flex;flex-wrap: wrap;gap: 20px;}.demo-box {flex: 1;min-width: 300px;padding: 20px;border-radius: 8px;background: #f8fafc;}.event-target {padding: 30px;background: #e3f2fd;border-radius: 8px;margin: 15px 0;position: relative;cursor: pointer;}.event-target .inner {padding: 20px;background: #bbdefb;border-radius: 6px;}.event-target .inner .core {padding: 15px;background: #90caf9;border-radius: 4px;}.form-demo {background: #e8f5e9;padding: 20px;border-radius: 8px;margin-top: 20px;}button {background: #42b983;color: white;border: none;padding: 12px 20px;border-radius: 6px;cursor: pointer;font-size: 16px;font-weight: 500;transition: background 0.3s;display: inline-block;margin: 5px;}button:hover {background: #3aa776;}.log-area {background: #1e1e1e;color: #d4d4d4;padding: 20px;border-radius: 8px;margin-top: 20px;font-family: Fira Code, monospace;max-height: 300px;overflow-y: auto;font-size: 14px;}.log-entry {margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px solid #333;}.log-time {color: #6a9955;}.keyboard-demo {display: flex;gap: 15px;flex-wrap: wrap;margin: 20px 0;}.key {background: #3498db;color: white;padding: 12px 18px;border-radius: 6px;cursor: pointer;text-align: center;min-width: 80px;}.mouse-buttons {display: flex;gap: 15px;margin: 20px 0;}.mouse-btn {background: #9b59b6;color: white;padding: 15px;border-radius: 8px;cursor: pointer;text-align: center;flex: 1;}.summary-table {width: 100%;border-collapse: collapse;margin: 25px 0;background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);}.summary-table th, .summary-table td {border: 1px solid #e2e8f0;padding: 16px;text-align: left;}.summary-table th {background-color: #f8fafc;font-weight: 600;color: #2c3e50;}.summary-table tr:nth-child(even) {background-color: #f8fafc;}.highlight {background-color: #fff9c4;padding: 2px 4px;border-radius: 3px;color: #333;}media (max-width: 768px) {.demo-container {flex-direction: column;}h1 {font-size: 2.2rem;}}/style
/head
bodydiv classcontainerheaderh1Vue 事件修饰符详解/h1p classsubtitle全面解析 Vue 事件修饰符的原理、用法及最佳实践/p/headerdiv classcarddiv classcard-headerh2事件修饰符基础/h2/divp事件修饰符是 Vue 为 v-on 指令提供的特殊后缀用于处理 DOM 事件细节/pdiv classmodifier-grid!-- .stop 修饰符 --div classmodifier-cardh3span classicon✋/span .stop/h3p阻止事件冒泡相当于 event.stopPropagation()/pdiv classcode-blocklt;div click.stophandleClickgt;...lt;/divgt;/divp classdemo-hint点击内部元素不会触发外部元素的事件/p/div!-- .prevent 修饰符 --div classmodifier-cardh3span classicon/span .prevent/h3p阻止默认行为相当于 event.preventDefault()/pdiv classcode-blocklt;form submit.preventonSubmitgt;...lt;/formgt;/divp classdemo-hint阻止表单提交、链接跳转等默认行为/p/div!-- .capture 修饰符 --div classmodifier-cardh3span classicon/span .capture/h3p使用事件捕获模式从外到内处理事件/pdiv classcode-blocklt;div click.capturehandleCapturegt;...lt;/divgt;/divp classdemo-hint先处理外部元素再处理内部元素/p/div!-- .self 修饰符 --div classmodifier-cardh3span classicon/span .self/h3p只当事件是从元素自身触发时触发/pdiv classcode-blocklt;div click.selfhandleSelfgt;...lt;/divgt;/divp classdemo-hint忽略内部元素冒泡上来的事件/p/div!-- .once 修饰符 --div classmodifier-cardh3span classicon1️⃣/span .once/h3p事件只触发一次/pdiv classcode-blocklt;button click.oncehandleOncegt;...lt;/buttongt;/divp classdemo-hint第一次点击后自动移除事件监听/p/div!-- .passive 修饰符 --div classmodifier-cardh3span classicon⚡/span .passive/h3p提升滚动性能不阻止默认行为/pdiv classcode-blocklt;div scroll.passiveonScrollgt;...lt;/divgt;/divp classdemo-hint特别针对移动端滚动优化/p/div/divdiv classdemo-areah3事件修饰符演示/h3div classdemo-containerdiv classdemo-boxh4事件冒泡测试/h4div classevent-target clicklogEvent(outer)外层区域div classinner clicklogEvent(inner)中间区域div classcore clicklogEvent(core)核心区域/div/div/divdiv classkeyboard-demobutton clickclearLogs清除日志/buttonbutton clickaddStopModifier(core)核心添加.stop/buttonbutton clickaddSelfModifier(inner)中间添加.self/button/div/divdiv classdemo-boxh4默认行为测试/h4div classform-demoform submitlogEvent(表单提交)pinput typetext placeholder输入内容 stylewidth:100%; padding:10px; margin:10px 0;/pbutton typesubmit普通提交/buttonbutton typesubmit click.preventlogEvent(阻止提交)阻止提交/buttonbutton typesubmit click.prevent.oncelogEvent(只提交一次)只提交一次/button/formdiv stylemargin-top: 20px;a hrefhttps://vuejs.org clicklogEvent(普通链接)普通链接/aa hrefhttps://vuejs.org click.preventlogEvent(阻止跳转)阻止跳转链接/a/div/div/div/divdiv classlog-areadiv v-for(log, index) in eventLog :keyindex classlog-entryspan classlog-time{{ log.time }}/span - {{ log.message }}/div/div/div/divdiv classcarddiv classcard-headerh2按键修饰符/h2/divpVue 提供按键修饰符来处理键盘事件/pdiv classdemo-areadiv classkeyboard-demodiv classkey keydown.enterhandleKey(Enter)Enter/divdiv classkey keydown.eschandleKey(Esc)Esc/divdiv classkey keydown.spacehandleKey(Space)Space/divdiv classkey keydown.uphandleKey(↑)↑/divdiv classkey keydown.downhandleKey(↓)↓/divdiv classkey keydown.lefthandleKey(←)←/divdiv classkey keydown.righthandleKey(→)→/divdiv classkey keydown.deletehandleKey(Delete)Delete/divdiv classkey keydown.tabhandleKey(Tab)Tab/div/divdiv classkeyboard-demodiv classkey keydown.ctrl.exacthandleKey(Ctrl)Ctrl/divdiv classkey keydown.alt.exacthandleKey(Alt)Alt/divdiv classkey keydown.shift.exacthandleKey(Shift)Shift/divdiv classkey keydown.meta.exacthandleKey(Meta)Meta/div/divdiv classkeyboard-demodiv classkey keydown.ctrl.enterhandleKey(CtrlEnter)CtrlEnter/divdiv classkey keydown.alt.spacehandleKey(AltSpace)AltSpace/divdiv classkey keydown.shift.uphandleKey(Shift↑)Shift↑/div/divinput typetext placeholder在此输入内容测试按键事件 keydownlogKeyEventstylewidth:100%; padding:12px; border-radius:6px; border:1px solid #ddd; margin:15px 0;div classlog-areadiv v-for(log, index) in keyLog :keyindex classlog-entryspan classlog-time{{ log.time }}/span - {{ log.message }}/div/div/div/divdiv classcarddiv classcard-headerh2鼠标修饰符/h2/divdiv classdemo-areadiv classmouse-buttonsdiv classmouse-btn clickhandleMouse(左键)左键点击/divdiv classmouse-btn click.righthandleMouse(右键)右键点击/divdiv classmouse-btn click.middlehandleMouse(中键)中键点击/divdiv classmouse-btn click.lefthandleMouse(左键)左键点击/div/divdiv classmouse-buttonsdiv classmouse-btn click.ctrlhandleMouse(Ctrl点击)Ctrl点击/divdiv classmouse-btn click.shifthandleMouse(Shift点击)Shift点击/divdiv classmouse-btn click.althandleMouse(Alt点击)Alt点击/divdiv classmouse-btn click.exacthandleMouse(精确点击)精确点击/div/divdiv classlog-areadiv v-for(log, index) in mouseLog :keyindex classlog-entryspan classlog-time{{ log.time }}/span - {{ log.message }}/div/div/div/divdiv classcarddiv classcard-headerh2事件修饰符总结/h2/divdiv classsummary-tabletabletheadtrth修饰符/thth作用/thth原生 JS 等效操作/thth使用场景/th/tr/theadtbodytrtdcode.stop/code/tdtd阻止事件冒泡/tdtdcodeevent.stopPropagation()/code/tdtd阻止内部事件触发外部事件/td/trtrtdcode.prevent/code/tdtd阻止默认行为/tdtdcodeevent.preventDefault()/code/tdtd阻止表单提交、链接跳转/td/trtrtdcode.capture/code/tdtd使用捕获模式/tdtd在事件捕获阶段处理/tdtd需要先处理父级再处理子级/td/trtrtdcode.self/code/tdtd仅自身触发时处理/tdtd检查 codeevent.target/code/tdtd忽略子元素冒泡事件/td/trtrtdcode.once/code/tdtd只触发一次/tdtd触发后移除事件监听/tdtd一次性操作如首次点击/td/trtrtdcode.passive/code/tdtd提升滚动性能/tdtdcode{ passive: true }/code/tdtd移动端滚动优化/td/trtrtdcode.{keyCode}/code/tdtd按键事件/tdtdcodeevent.keyCode/code/tdtd处理特定按键事件/td/trtrtdcode.native/code/tdtd监听组件根元素/tdtd原生事件绑定/tdtd在组件上监听原生事件/td/tr/tbody/table/divdiv classdemo-areah3最佳实践/h3ulli使用修饰符代替直接在方法中操作 DOM 事件/lili注意修饰符的顺序codeclick.prevent.self/code 与 codeclick.self.prevent/code 不同/lili移动端优先使用 code.passive/code 提升滚动性能/lili使用 code.exact/code 修饰符精确控制系统修饰符组合/lili自定义按键别名codeVue.config.keyCodes.f1 112/code/li/uldiv classcode-block// 修饰符串联示例lt;a click.stop.preventhandleLinkgt;链接lt;/agt;// 精确控制系统修饰符lt;button click.ctrl.exactctrlClickgt;Ctrl点击lt;/buttongt;// 自定义按键别名Vue.config.keyCodes {f1: 112,mediaPlayPause: 179}/div/div/div/divscriptnew Vue({el: .container,data: {eventLog: [],keyLog: [],mouseLog: [],stopModifier: ,selfModifier: },methods: {logEvent(source) {const time new Date().toLocaleTimeString();this.eventLog.unshift({time,message: 事件来源: ${source}});if (this.eventLog.length 20) {this.eventLog.pop();}},logKeyEvent(event) {const time new Date().toLocaleTimeString();this.keyLog.unshift({time,message: 按键: ${event.key} (代码: ${event.code})});if (this.keyLog.length 15) {this.keyLog.pop();}},handleKey(key) {const time new Date().toLocaleTimeString();this.keyLog.unshift({time,message: 检测到按键: ${key}});},handleMouse(button) {const time new Date().toLocaleTimeString();this.mouseLog.unshift({time,message: 鼠标操作: ${button}});},clearLogs() {this.eventLog [];this.keyLog [];this.mouseLog [];},addStopModifier(element) {this.stopModifier element;this.logEvent(为${element}元素添加了.stop修饰符);},addSelfModifier(element) {this.selfModifier element;this.logEvent(为${element}元素添加了.self修饰符);},// 模拟修饰符效果handleCoreClick(event) {if (this.stopModifier core) {event.stopPropagation();}this.logEvent(核心区域);},handleInnerClick(event) {if (this.selfModifier inner) {if (event.target ! event.currentTarget) return;}this.logEvent(中间区域);}}});/script
/body
/htmlVue 事件修饰符详解
核心事件修饰符 .stop - 阻止事件冒泡 等效于 event.stopPropagation()停止事件冒泡使用场景阻止内部事件触发外部事件 .prevent - 阻止默认行为 等效于 event.preventDefault()阻止事件的默认行为。使用场景阻止表单提交、链接跳转等 .capture - 使用事件捕获模式 事件从外到内处理默认是冒泡模式从内到外 添加事件监听器包括两种不同的方式 一种是从内到外添加是事件冒泡模式一种是从外到内添加是事件捕获模式 使用场景需要先处理父级再处理子级的事件 .self - 仅当事件源是元素自身时触发 忽略子元素冒泡上来的事件使用场景只在点击元素自身时触发忽略内部元素事件 .once - 事件只触发一次 触发后自动移除事件监听使用场景一次性操作如首次点击 .passive - 提升滚动性能(passive意为顺从、不抵抗。直接继续立即执行事件的默认行为) 告诉浏览器不阻止默认行为使用场景移动端滚动优化注意.passive和.prevent修饰符是对立的。两者不可以共存如果一起用就会报错。 .prevent :阻止事件的默认行为.passive:解除阻止事件的默认行为
注意在Vue当中使劲按修饰符可以多个联合使用例如 click.self.stop:先执行.self.再执行.stop
按键修饰符
Vue 提供了常见按键的别名
.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right
系统修饰键
.ctrl.alt.shift.meta (Windows 键或 Command 键)
鼠标修饰符
.left - 左键点击.right - 右键点击.middle - 中键点击
修饰符使用技巧 修饰符串联 !-- 先停止冒泡再阻止默认行为 --
a click.stop.preventdoThat/a精确修饰符 !-- 有且只有 Ctrl 被按下时才触发 --
button click.ctrl.exactonCtrlClickCtrlClick/button!-- 没有任何系统修饰符被按下时才触发 --
button click.exactonClickClick/button自定义按键别名 // 全局配置
Vue.config.keyCodes {f1: 112,mediaPlayPause: 179
}// 使用
input keyup.f1help keyup.mediaPlayPauseplayPause最佳实践
使用修饰符替代在方法中操作 DOM 事件注意修饰符的顺序从左到右处理移动端优先使用 .passive 提升滚动性能使用 .exact 精确控制系统修饰键组合避免过度使用 .once确保用户理解操作是一次性的
