對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解
在開(kāi)發(fā)過(guò)程中經(jīng)常遇到的一個(gè)場(chǎng)景，就是，頁(yè)面彈窗，彈窗上有一個(gè)確定或者關(guān)閉按鈕,這時(shí)，如果下方有一個(gè)按鈕，那你點(diǎn)擊彈窗的時(shí)候，也會(huì)觸發(fā)彈窗下層的按鈕事件，vue提供的解決方法就是直接在click.stop
//阻止單擊事件繼續(xù)傳播 <a v-on:click.stop="doThis"></a>
js的解決辦法是，直接在事件的方法中添加event.stopPropagation()
//html <button>關(guān)閉</button>
//js
$("button").on("click",function(){
event.stopPropagation()
})
還有一種情況就是，設(shè)計(jì)非要把蒙層放在最上層，明明遮住了按鈕，他不管，他就覺(jué)得這么放好看，那怎么辦？好在前端足夠強(qiáng)大，能夠解決這個(gè)問(wèn)題，就是css中的一個(gè)pointer-events
//據(jù)網(wǎng)傳，除了none/auto以外，其他都是用在svg項(xiàng)目中
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
<button>確認(rèn)</button>
<div class=“cover”></div>
.cover{
position: fixed;
width: 100%;
height: 110%;
z-index:999;
//給遮罩層上添加這個(gè)屬性即可，這是就可以穿透遮罩層，觸發(fā)到確認(rèn)按鈕了
pointer-events：none;
}
以上這篇對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能
當(dāng)今的Web開(kāi)發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開(kāi)發(fā)分離開(kāi)來(lái),使得前端和后端可以獨(dú)立進(jìn)行開(kāi)發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能,需要的朋友可以參考下2024-06-06
vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實(shí)現(xiàn)寬度自適應(yīng),本文給大家分享實(shí)現(xiàn)方案，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
前端開(kāi)發(fā)的時(shí)候,在項(xiàng)目中引入組件以及使用是非常常見(jiàn)操作,下面這篇文章主要給大家介紹了關(guān)于Vue全局提示組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
記錄一下本地測(cè)試前端的時(shí)候怎么訪問(wèn)本地后端接口,文中給大家提到了vue如何做調(diào)試后臺(tái)接口的配置和proxy的工作原理以及為什么能解決跨域，感興趣的朋友跟隨小編一起看看吧2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue中組件之間相互通信傳值的幾種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬列表，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Vue結(jié)合Video.js播放m3u8視頻流的方法示例
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue3如何實(shí)現(xiàn)單點(diǎn)登錄問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03