對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、陵川網(wǎng)站維護(hù)、網(wǎng)站推廣。

//阻止單擊事件繼續(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è)問(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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解
標(biāo)題URL：http://muchs.cn/article30/gheipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)