关于vue.js:input如何获取失去焦点鼠标点击的位置或者元素

需要背景

举个栗子：
如下日历，目前存在一个问题，当我删除掉input值的时候，日历里model的值并没有删除掉。只是input显示的值被删除了。

为了解决这个bug, 我须要给Input增加blur事件，清空日历model值。同时，如果我blur点击的区域如果在下方日历显示的中央，禁止blur里的办法执行。

重点问题

如何判断blur事件鼠标点击的地位在日历上呢？

依据 MDN中blur的定义以及实际，我是没有方法从blur(event) 里获取所点击的地位的信息的。

所以我只能另辟蹊径，监听以后dom元素的click事件获取点击的中央，不就能够获取了。

解决方案

全局监听click事件判断是否点击到了日历

window.document.addEventListener('click', this.handleDocClick, false)

解决问题的路线是充斥波折的。

此时又产生了一个新的问题，发现blur事件永远比click事件先执行，blur都执行完了，我获取了地位也用不到呀。

blur,click执行程序解决

blur和focus事件不会冒泡，其余表单事件都能够

click事件；所有元素都有此事件，会产生冒泡

一个元素失去焦点，blur事件优先于click事件

执行程序为mousedown > mouseup > click

咱们只须要把 全局监听的click事件换成 mousedown就能够了

window.document.addEventListener('mousedown', this.handleDocClick, false)

handleDocClick (e) {
  const target = e.target
  if (!this.picker) {
    return
  }
  // 日历是否被点击过
  this.pickerClicked = contains(this.picker.$el, target) // contains 判断日历picker元素是否蕴含mousedown点击的元素
},

// 节点蕴含
export const contains = (root, target) => {
  // root 节点是否蕴含 target 节点
  const isElement =
    Object.prototype.toString.call(root).includes('Element') &&
    Object.prototype.toString.call(target).includes('Element')
  if (!isElement) {
    return false
  }
  let node = target
  while (node) {
    if (node === root) {
      return true
    }
    node = node.parentNode
  }
  return false
}