contains 之 點擊元素外位置隱藏元素
阿新 • • 發佈:2019-04-10
隱藏元素 div .com doc com .html rip event 報錯
contains 之 點擊元素外位置隱藏元素
api:
contains 檢測一個元素包含在另一個元素之內 詳解:http://www.runoob.com/jquery/misc-contains.html
原理:
監聽click事件,當點擊時判斷點擊位置是否包含在目標元素內,若判斷通過則隱藏
代碼:
// 創建click監聽 mounted () { document.addEventListener(‘click‘, this.queryHide) }, // 清除click監聽 beforeDestroy () { document.removeEventListener(‘click‘,this.queryHide) }, methods: { queryHide (e) { if ((!this.$refs.queryBox.contains(e.target)) && (!this.$refs.queryDown.contains(e.target))) { /* 關閉元素 */ this.show = false } } }
註意:
1.監聽需要清除,否則控制臺會報錯,雖然不影響使用
2.一般判斷需要判斷需要關閉的元素和開啟這個元素的按鈕
3.ref替代了jquery和js的dom選擇,當不適用vue的時候可以直接使用dom選擇器完成以上操作
鉆研不已,轉載請註明出處。。。。。
contains 之 點擊元素外位置隱藏元素