對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解
在開發(fā)過程中經(jīng)常遇到的一個(gè)場(chǎng)景，就是，頁面彈窗，彈窗上有一個(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ì)非要把蒙層放在最上層，明明遮住了按鈕，他不管，他就覺得這么放好看，那怎么辦？好在前端足夠強(qiáng)大，能夠解決這個(gè)問題，就是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í)例詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了若依VUE前端打包到測(cè)試環(huán)境,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
本文給大家介紹了vue項(xiàng)目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
圖文詳解如何在vue3+vite項(xiàng)目中使用svg
SVG指可伸縮矢量圖形,用來定義用于網(wǎng)絡(luò)的基于矢量的圖形,下面這篇文章主要給大家介紹了關(guān)于如何在vue3+vite項(xiàng)目中使用svg的相關(guān)資料,需要的朋友可以參考下2021-11-11
vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了簡單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
手把手教你將vue前端和python腳本使用electron打包成桌面應(yīng)用程序
這篇文章主要介紹了如何將Vue項(xiàng)目和Python腳本打包,并將打包后的文件部署到Vue項(xiàng)目中,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
ant desing vue table 實(shí)現(xiàn)可伸縮列的完整例子
最近在使用ant-design-vue做表格時(shí)，遇到要做一個(gè)可伸縮列表格的需求，在網(wǎng)上一直沒有找到好的方法，于是小編動(dòng)手自己寫個(gè)可以此功能，下面小編把a(bǔ)nt desing vue table 可伸縮列的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考2021-05-05
微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名
這篇文章主要介紹了微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別，需要的朋友可以參考下2018-04-04