vue -- 事件修饰符

mac2022-06-30  20

methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

.stop => // 阻止冒泡 .prevent => // 阻止默认行为 .capture => // .self => // 只有点击事件本身才有效,子元素没有效果 .once => // 只点击一次 .passive => // 不阻止默认行为

使用修饰符时的顺序会产生一些影响,因为相关的代码会以相同的顺序生成。

<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 只有点击事件本身才有效 --> <a v-on:click.stop="doThis"></a> <!-- 添加事件监听器时,使用事件捕获模式 --> <!-- 也就是说,内部元素触发的事件先在此处处理,然后才交给内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 停止点击事件冒泡 --> <a v-on:click.self="doThis"></a> // .passive 会向浏览器传达的意思是,你_并不_希望阻止事件的默认行为 <!-- 滚动事件的默认行为(滚动)将立即发生, --> <div v-on:scroll.passive="onScroll">...</div> <!-- 停止点击事件默认行为 --> <a v-on:click.prevent="doThis"></a>

转载于:https://www.cnblogs.com/zjh-study/p/10656286.html

最新回复(0)