對vue中的事件穿透與禁止穿透實例詳解

更新時間：2019年10月28日 09:12:47 作者：rainbow8300

今天小編就為大家分享一篇對vue中的事件穿透與禁止穿透實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在開發(fā)過程中經常遇到的一個場景，就是，頁面彈窗，彈窗上有一個確定或者關閉按鈕,這時，如果下方有一個按鈕，那你點擊彈窗的時候，也會觸發(fā)彈窗下層的按鈕事件，vue提供的解決方法就是直接在click.stop

//阻止單擊事件繼續(xù)傳播
<a v-on:click.stop="doThis"></a>

js的解決辦法是，直接在事件的方法中添加event.stopPropagation()

//html
<button>關閉</button>

//js
$("button").on("click",function(){
 event.stopPropagation()
})

還有一種情況就是，設計非要把蒙層放在最上層，明明遮住了按鈕，他不管，他就覺得這么放好看，那怎么辦？好在前端足夠強大，能夠解決這個問題，就是css中的一個pointer-events

//據網傳，除了none/auto以外，其他都是用在svg項目中

 <button>確認</button>
 <div class=“cover”></div>
 .cover{
 position: fixed;
 width: 100%;
 height: 110%;
 z-index:999;
 //給遮罩層上添加這個屬性即可，這是就可以穿透遮罩層，觸發(fā)到確認按鈕了
 pointer-events：none;
 }

以上這篇對vue中的事件穿透與禁止穿透實例詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

VUE前端打包到測試環(huán)境的解決方法
這篇文章主要介紹了若依VUE前端打包到測試環(huán)境,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
Vue項目中跨域問題解決方案
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內容詳情大家跟隨腳本之家小編一起學習吧
2018-06-06
vue 數(shù)據遍歷篩選過濾排序的應用操作
這篇文章主要介紹了vue 數(shù)據遍歷篩選過濾排序的應用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
圖文詳解如何在vue3+vite項目中使用svg
SVG指可伸縮矢量圖形,用來定義用于網絡的基于矢量的圖形,下面這篇文章主要給大家介紹了關于如何在vue3+vite項目中使用svg的相關資料,需要的朋友可以參考下
2021-11-11
vue-router之實現(xiàn)導航切換過渡動畫效果
今天小編就為大家分享一篇vue-router之實現(xiàn)導航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
編寫v-for循環(huán)的技巧匯總
這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
簡單了解vue.js數(shù)組的常用操作
這篇文章主要介紹了簡單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
手把手教你將vue前端和python腳本使用electron打包成桌面應用程序
這篇文章主要介紹了如何將Vue項目和Python腳本打包,并將打包后的文件部署到Vue項目中,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下
2025-01-01
ant desing vue table 實現(xiàn)可伸縮列的完整例子
最近在使用ant-design-vue做表格時，遇到要做一個可伸縮列表格的需求，在網上一直沒有找到好的方法，于是小編動手自己寫個可以此功能，下面小編把ant desing vue table 可伸縮列的實現(xiàn)代碼分享到腳本之家平臺供大家參考
2021-05-05
微信小程序如何像vue一樣在動態(tài)綁定類名
這篇文章主要介紹了微信小程序如何像vue一樣在動態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別，需要的朋友可以參考下
2018-04-04