点击网页空白区域隐藏当前div弹框jquery内置方法closest

26次阅读

共计 535 个字符,预计需要花费 2 分钟才能阅读完成。

一. closest 方法介绍

1)定义

closest 先检查当前元素是否匹配,如果匹配则直接返回元素本身;如果不匹配就会逐级向上查找父元素,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的 jQuery 对象。

2)closest 与 parent 方法对比

  • closest 从当前元素开始向上匹配寻找,parent 从父元素开始向下匹配寻找;
  • closest 逐级向上查找,直到发现匹配的元素后就停止了,parent 一直查找到根元素,然后把匹配的元素放进一个集合中;
  • closest 返回 0 或 1 个元素,parent 可能包含 0 个或多个元素。

二. 实践:点击蒙版后隐藏当前 div

若点击时的对象在 div 上,返回的对象 length 为 1;若点在 div 之外的区域,closest 找不到匹配的元素返回对象 length 为 0。因此可以实现当没有点击 div 时 (返回对象 length 为 0),隐藏 div。

$('body').on('click', (ev)=>{let dom1 = $(ev.target).closest('.box').length// 0 为没有匹配找到,1 为找到
    if (dom1 < 1) {// 点击 div 之外时,将其隐藏
        this.show = false // 定义 v -show="show" 控制 div 显示和隐藏
    }
})

正文完
 0