實現多層DIV疊加的js事件穿透,stopPropagation

1:通常情況下,我們在編寫彈框的時候都會出現一個蒙層,如果彈框沒有設置關閉按鈕,例如下圖,需要點擊除了彈框意外的任何地方,來關閉蒙層,這個時候怎么解決呢,首先難點在:彈框是包含在蒙層 div結構里面的,


image.png

div結構體如圖:


image.png

1:方法:比較靈活的方法是將 上層蒙層,和彈框分離開;


image.png

2:方法:使用stopPropagation
知識點:stopPropagation() 方法防止調用相同事件的傳播。傳播意味著向上冒泡到父元素或向下捕獲到子元素。從而點擊蒙層上面的彈框,組織事件往彈框層向他的父級傳遞事件:優(yōu)雅的解決問題!


image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容