【JS】JavaScript实现点击自定义区域空白处隐藏div

点击空白处隐藏 div

前言

点击选择框，显示/隐藏颜色选择器
点击除了颜色选择器（< SketchPicker />）的地方，使其隐藏

未点击前效果如下：

展开后效果：

点击除了颜色选择器的任何区域，可将其隐藏

实现

方法一：JQuery实现（不建议）

// jquery写法
$(function () {
$(".color_select").click(function (event) {
  //取消事件冒泡
  event.stopPropagation()
  //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
  $("#secondMenu").slideToggle("slow")
  setshowBCPicker(!showBCPicker)
  colorType == "color"
  ? setshowBCPicker(!showBCPicker)
  : setshowTCPicker(!showTCPicker)
  return false
  })
  //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
  $(document).click(function (event) {
  var _con = $(".color_select") // 设置目标区域
  if (!_con.is(event.target) && _con.has(event.target).length === 0) {
  $("#view").slideUp("slow") //滑动消失
  setshowBCPicker(false)
  colorType == "color" ? setshowBCPicker(false) : setshowTCPicker(false)
  $('#view').hide(1000);          //淡出消失
  }
 })
})

总结：可以实现 但性能消耗过大，一旦连续触发三次以上，页面直接无响应

方法二：React写法（Vue应该也适用）

1. 定义函数 用于循环查找指定标签

const getShow = () => {
    var e = window.event //浏览器兼容性
    var elem = e.target
    while (elem) {
      //循环判断至跟节点，防止点击的是div子元素
      // 背景色
      if (elem.id && elem.id === "judge_bg") {
     		// 因为点击select本身会控制显示/隐藏，故取反
        setshowBCPicker(!showBCPicker)
        return
      } else {
        setshowBCPicker(false)
      }
      if (elem.id && elem.id === "judge_bg_sk") {
        setshowBCPicker(true)
        return
      }
      // 主题色
      if (elem.id && elem.id === "judge_tc") {
        setshowTCPicker(!showTCPicker)
        return
      } else {
        setshowTCPicker(false)
      }
      if (elem.id && elem.id === "judge_tc_sk") {
        setshowTCPicker(true)
        return
      }
      elem = elem.parentNode
    }
  }

2. 将函数绑定给想要监听的区域中最大的父元素

3. 注意一定要用id选择器，尝试使用class类选择器，但未生效

总结： 性能消耗小 多次频繁切换不会卡顿 推荐该种写法