VUE DOCUMENT THERE

fernMao
166 阅读8分钟

6月29晚上说的是第二天再书写修饰符

结果是今天才进行更新................

昨天上海地铁出现问题，好多人.... 好拥挤.....  但是看一看公交：等待首站发车........

还是乖乖等待地铁..........   


一：事件修饰符

 1：阻止单击事件继续传播（阻止冒泡）  .stop

下面看一下最开始写的代码   

<template>    
   <div>        
      <h1 v-on:click.stop="dothis">阻止单击事件</h1>    
        </div>
</template>

<script>
export default {    
   data(){        
       return{         
       count:0        
       }    
   },    
   methods:{        
       dothis(e){            
             this.count++            
             console.log("阻止单击事件",e,this.count)        
       }    
   }
};
</script>

<style lang="sass" scoped>
  
</style>


出现的结果：每次点击都会成功   

想一想“阻止单击事件继续传播”为什么没有阻止为什么会成功

查一查看一看  是自己理解错误导致结果出现问题



这样写好像是没有什么问题  

<template>    
   <div>
       <h1 v-on:click="just">第一次点击事件</h1>
       <h1 v-on:click.stop="dothis">阻止单击事件</h1>  </div>

</template>
<script>
 export default {    
       data(){        
          return{         
          count:0        
             }    
        },    
       methods:{        
            just(){   
                 console.log("第一次点击事件")        
            },        
            dothis(e){            
                 this.count++            
                 console.log("阻止单击事件",e,this.count)        
             }    
      }
};

</script>

<style lang="sass" scoped>  

</style>


但是结果是  并没有阻止 依然在继续执行


“阻止单击事件继续传播”的意思就是 :"阻止事件冒泡”

事件冒泡：当一个元素上的事件被触发的时候，鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

只单击内部就会触发外部和元素上绑定的click事件，这就是由事件冒泡所引起的。只单击元素的同时，也单击了包含元素的元素和包含元素的元素元素，并且每一个元素都会按照特定的顺序响应click事件。

小时候吹泡泡 就是从下往上的嘛  哈哈哈

事件冒泡的过程：h1dothis这个元素  ---》 h1just这个元素   h1dothis冒泡到 h1jsust这个

<template>    
   <div>        
      <h1 v-on:click="just">            
         <h1 v-on:click.stop="dothis">阻止单击事件</h1>        
      </h1>    
   </div>
</template>

<script>
export default {    
     data(){        
        return{         
        count:0        
        }    
      },    
     methods:{        
         just(){            
            console.log("第一次点击事件")        
         },        
        dothis(){            
            this.count++            
            console.log("阻止单击事件",this.count)        
         }    
      }
};

</script>

<style lang="sass" scoped>  

</style>


这样就没有问题  已经阻止单击事件继续传播




 2：提交事件不再重载页面（取消默认事件）  .prevent 

<form v-on:sumbime.prevent="xxx"></form>  // @submit.prevent

     

<template>    
    <div>                  
       <form   v-on:submit.prevent="dothis('hhhh')" action="">               
          <input type="text" >               
          <button type="submit">提交</button>           
       </form>    
    </div>
</template>

<script>
export default {    
    data(){        
       return{         
           count:0        
       }    
    },    
   methods:{        
      dothis(mes){            
          this.count++            
          console.log("提交事件不再重载页面",this.count)                    
      },             
   }
};

</script>

<style lang="sass" scoped>  

</style>


下面a标签会进行指定页面的跳转而且是新开的页面 @clicl.prevevt之后会取消跳转而且新开页面

<template>    
<div>           
<a href="http://www.hao123.com" target="_blank"  @click.prevent>点击</a>    
</div>
</template>

<script>
export default {    
    data(){        
      return{         
      count:0        
    }    
},    
    methods:{        
         dothis(mes){            
            this.count++            
            console.log("提交事件不再重载页面",this.count)                   
         },             
   }
};

</script>

<style lang="sass" scoped>  

</style>


3修饰符串联

   阻止事件冒泡及默认事件

<template>    
   <div>        

      <h1 v-on:click="just">            
         <a href="http://www.hao123.com" target="_blank"  @click.stop.prevent="dothis">点击</a>        
      </h1>    
   </div>
</template>

<script>
export default {    
    data(){        
      return{         
       count:0        
      }    
    },    
   methods:{        
      just(){            
          console.log("第一次点击事件")         
      },        
     dothis(){            
         this.count++            
         console.log("阻止事件冒泡及阻止默认事件",this.count)        
      }    
  }
};

</script> 

<style lang="sass" scoped>  

</style>


结果:既不进行转跳也不进行冒泡



进行冒泡但不进行默认事件

<template>    
    <div>        
       <h1 v-on:click="just">            
         <a href="http://www.hao123.com" target="_blank"  @click.prevent="dothis">点击</a>        
       </h1>    
    </div>
 </template>

<script>
export default {    
     data(){        
        return{         
         count:0        
     }    
},    
     methods:{        
       just(){            
           console.log("第一次点击事件")        
       },        
      dothis(){           
           this.count++            
           console.log("阻止事件冒泡及阻止默认事件",this.count)        
      }    
    }
};

</script>

<style lang="sass" scoped>  

</style>

 结果





不进行冒泡但是进行默认事件  不触发冒泡但是进行页面转跳而且是新开的页面

<template>    
    <div>        
       <h1 v-on:click="just">            
          <a href="http://www.hao123.com" target="_blank"  @click.stop="dothis">点击</a>       
      </h1>    
   </div>
</template>
<script
export default {   
    data(){        
      return{         
      count:0        
     }    
  },    
   methods:{        
     just(){            
     console.log("第一次点击事件")        
     },        
     dothis(){            
       this.count++            
       console.log("阻止事件冒泡及阻止默认事件",this.count)        
     }    
  }
};

</script>

<style lang="sass" scoped>  

</style>


.capture 

添加事件监听器时使用事件捕获模式

内部元素触发的事件先在此处理 然后才交由内部元素进行处理

在vue中，当我们添加了事件修饰符capture后，才会变成捕获监听器

<template>    
    <div>        
       <h1 v-on:click="just">            
         第一层            
            <h1 v-on:click.capture="just2">                
               第二层                
                <h1 v-on:click="just3">                    
                  第三层                    
                   <h1 v-on:click="just4">
                     第四层
                    </h1>                
       </h1>            
           </h1>        
              </h1>    
      </div>
</template>

<script>
export default {    
    data(){        
      return{         
        count:0        
       }    
    },    
    methods:{        
        just(){            
           console.log("第一层点击事件")        
        },                
       just2(){            
           console.log("第二层点击事件")        
       },                
      just3(){            
           console.log("第三层点击事件")        
       },        
      just4(){            
           console.log("第四层点击事件")        
      },    
   }
};

</script>

<style lang="sass" scoped>  

</style>


正常情况下（冒泡）的顺序为：h4-->h3-->h2-->h1   （从里往外）

但是现在的情况是  先执行.capture 然后在由里向外冒泡

       点击第四层 出现的顺序为：h2-->h4-->h3-->h1

       点击第三层 出现的顺序为：h2-->h3-->h1

       点击第二层 出现的顺序为：h2-->h1

       点击第一层 出现的顺序为：h1

捕获的顺序为：从上往下  

冒泡的顺序为：从下往上

.capture影响了嵌套的执行顺序


现在阻止冒泡

         
<template>  
   <div>    
       <h1 v-on:click="just">      
          <h1 v-on:click.capture.stop="just2">        
              <h1 v-on:click="just3">          
                 <h1 v-on:click="just4">第四层</h1>        
              </h1>      
          </h1>    
       </h1>  
   </div>
</template>       

<script>
export default {  
     data() {    
        return {      
           count: 0    
        };  
     },  
    methods: {    
          just() {      
               console.log("第一层点击事件");    
          },    
          just2() {      
               console.log("第二层点击事件");    
          },    
          just3() {      
               console.log("第三层点击事件");    
          },    
          just4() {      
               console.log("第四层点击事件");    
          } 
   }
};

</script>  

<style lang="sass" scoped>

</style>


结果是  触发的是第二个h1的点击事件


除了第一层（第一层没有冒泡 所以不会阻止冒泡） 触发的永远都是h2

<template>    
    <div>        
       <h1 v-on:click="just">        
          第一层            
             <h1 v-on:click.capture.stop="just2">              
                 第二层                
                  <h1 v-on:click="just3">                    
                     第三层                    
                         <h1 v-on:click="just4">第四层</h1>                
                   </h1>            
             </h1>        
        </h1>    
    </div>
</template>

<script>
export default {    
    data(){        
       return{         
          count:0        
       }    
    },    
    methods:{        
       just(){            
          console.log("第一层点击事件")        
       },                
       just2(){            
          console.log("第二层点击事件")        
       },                
       just3(){            
          console.log("第三层点击事件")        
       },        
       just4(){            
          console.log("第四层点击事件")        
       },    
    }
}

</script>

<style lang="sass" scoped>  

</style>





.self

只有在event.target是当前元素自身时触发处理函数

事件不是从从内部触发 

<template>    
    <div>        
        <h1 v-on:click="just">        
           第一层            
          <h1 v-on:click.self="just2">              
            第二层                
               <h1 v-on:click="just3">                    
                 第三层                    
                 <h1 v-on:click="just4">第四层</h1>                
                </h1>            
           </h1>        
        </h1>    
    </div>
</template>

<script>
export default {    
     data(){        
        return{         
          count:0        
        }    
    },    
    methods:{       
        just(){            
            console.log("第一层点击事件")        
        },                
       just2(){           
            console.log("第二层点击事件")        
        },                
       just3(){            
            console.log("第三层点击事件")        
       },        
      just4(){            
           console.log("第四层点击事件")        
      },    
   }
};
</script>

<style lang="sass" scoped>  

</style>

正常情况下（冒泡）的顺序为：h4-->h3-->h2-->h1   

但是现在的情况是 不执行有.self这个事件（ 如果是冒泡传递上来的事件不触发自身事件）  然后再由里向外冒泡

点击第四层 出现的顺序为：h4-->h3-->h1

点击第三层 出现的顺序为：h3-->h1

点击第二层 出现的顺序为：h2 -->h1（点击到了自身）

点击第一层 出现的顺序为：h1


.once

点击事件将只会触发一次


<template>    
      <div>             
            <h1 @click.once="dothis">点击事件只会触发一次</h1>          
      </div>
</template>

<script>
export default {    
     data(){        
       return{         
         count:0        
        }    
     },    
    methods:{        
        dothis(){            
            console.log("点击事件只会触发一次")        
        },    
    }
};
</script>

<style lang="sass" scoped>  

</style>

结果： 点击第二次便会无效


结果：阻止跳转到百度页面只能一次 第二次的时候依然可以跳转

<template>    
       <div>       
           <a href="http://www.hao123.com"  @click.prevent.once>点击跳转</a>    
       </div>
</template>

<script>
export default {    
    data(){        
       return{         
         count:0        
       }    
    },    
    methods:{    

    }
};
</script>

<style lang="sass" scoped>  

</style>


.passive

执行默认方法

浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。

意思就是：每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。加上passive就是为了告诉浏览器，不用查询，我们没用preventDefault阻止默认动作。

preventDefault：取消事件的默认动作

一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。








avatar
文章
阅读
粉丝