v on 事件修飾符

.stop 阻止冒泡

.prevent 阻止預設事件

.capture 新增事件偵聽器時使用事件捕獲模式

.self 只當該事件在該元素本身時（不是子元素）觸發時才**

.once 事件只觸發一次

1、未加.stop事件修飾符：

css部分：

1

1

<
div 
id>
2<
div 
class
="outer"
@click
="outerdivhandler"
>
3<
div 
class
="inner"
@click
="innerdivhandler"
>
4<
button 
@click
="btnhandler"
>點我
button
>
5div
>
6div
>
7div
>

1

vue(,
5methods: ,
9innerdivhandler() ,
12outerdivhandler() ,
15},
16 });

2、新增.top屬性修飾符後

1

<
div 
id>
2<
div 
class
="outer"
@click
="outerdivhandler"
>34
<
div 
class
="inner"
@click
="innerdivhandler"
>56
<
button 
@click.stop
="btnhandler"
>點我
button
>
7div
>
8div
>
9div
>

阻止元素的預設事件發生。

1<

a href

="" @click="ahandler"

a>

1

<
a href
=""@click.prevent
="ahandler"
a>

1、未新增.capture修飾符：

1

<
div 
class
="inner"
@click
="innerdivhandler"
>
2<
button 
@click
="btnhandler"
>點我
button
>
3div
>

2、新增了.capture後

1

<
div 
class
="inner"
@click.capture
="innerdivhandler"
>
2<
button 
@click
="btnhandler"
>點我
button
>
3div
>

1

<
div 
class
="inner"
@click.self
="innerdivhandler"
>
2<
button 
@click
="ahandler"
>點我
button
>
3div
>

點選綠色區域，只觸發了div繫結的事件。

注意：.self只會阻止自己身上的冒泡事件發生，如果上述div還有兄弟元素也繫結了事件，未加.self修飾符，按鈕也未加.stop修飾符，那麼點選按鈕，依然會觸發其兄弟元素的事件。

<

button 
@click.once
="btnhandler"
>點我
button
>

事件修飾符

修飾符是由點開頭的指令字尾來表示的 事件修飾符 方法中最好只有純粹的的資料邏輯，而不是處理dom事件細節。這時候就會用到事件修飾符 a v on click.stop dothis a form v on submit.prevent onsubmit form a v on click.stop....

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

vue 事件修飾符

事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是 methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。為了解決這個問題，vue.js...