关于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
}