526互联

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

发布时间 2023-07-24 17:57:33作者: 7c89
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
}