弹窗显示控制、自否是子元素

tabIndex 控制弹窗显示隐藏

tabindex 按tab键是依次选中元素，这时元素有 focus blur 事件。当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取。

缺点 弹窗内部不能有 别的元素可以获得焦点

tabIndex

监听点击事件 控制弹窗

 // 打开弹窗并且添加点击事件
    showMore () {
      this.checkboxShow = !this.checkboxShow
      if (this.checkboxShow) document.body.addEventListener('click',this.watchClick,true)
    },
    watchClick (e) {
      // e.preventDefault() // 阻止默认行为
      // e.stopPropagation() // 阻止 冒泡
      // e.currentTarget 事件绑定在那个上
      // e.target 点击的是那个
      // 判断点击的是否是元素内部，不是则关闭弹窗
      let child = isIncludesEle(this.$refs.downSelectDom,e.target)
      if (!child)｛
        this.checkboxShow = false
        // 关闭弹窗，并且移除事件
        document.body.removeEventListener('click',this.watchClick,true)
      ｝
    }

// 是否是子元素
export function isIncludesEle(parentEl,el) {
  if (parentEl.contains) return  parentEl.contains(el) 
  if (parentEl.compareDocumentPosition) return !!(parentEl.compareDocumentPosition(el) & 16)
  let prEl = el.parentNode
  // 只找到body 为止
  while (prEl && prEl.nodeName !== 'BODY') {
    if (prEl === parentEl) return true
    prEl = prEl.parentNode
  }
  return false
}

知识

事件流

事件流包括三个阶段“事件捕获阶段、出于目标阶段和事件冒泡阶段

事件流

addEventListener("click", function(){}, true)，第三个参数就是事件的捕获与冒泡， 为true时捕获，false时冒泡。 默认是false（冒泡阶段执行）

事件 默认是 冒泡的 在捕获阶段采用 e.stopPropagation() 阻止冒泡之后 冒泡事件将不会触发，（即 点击菜单栏等而并不会触发）
vue 中 可以在 父元素添加capture属性 采用事件捕获，从而改变事件执行顺序为先执行父元素方法再执行子元素方法

contains

contains 不是w3c标准， A.contains(B)方法 返回boolean值， 如果A元素包含B元素，则返回true 否则 false，firefox 不支持。注意 ：A.contains(A) 同样也返回 true

  // 是否是body子元素，且不包含body
  function isInPage(node) {
    return (node === document.body) ? false : document.body.contains(node);
  }

compareDocumentPosition

p1.compareDocumentPosition(p2) 返回值 一个数字，表示元素之间的关系，返回值也可以是值的组合，例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。

返回值