您好,登錄后才能下訂單哦!
在開發(fā)過程中經(jīng)常遇到的一個(gè)場景,就是,頁面彈窗,彈窗上有一個(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è)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。