需求背景举个栗子：下面的日历，目前有问题，当我删除输入值的时候，日历中model的值没有被删除。只是input显示的值被删除了。为了解决这个错误，我需要向输入添加一个模糊事件并清除日历模型值。同时，如果我点击blur的区域显示在下面的日历中，则禁止执行blur中的方法。关键问题是如何判断鼠标点击blur事件在日历上的位置？按照MDN中blur的定义和实践，我是没办法从blur(event)中得到点击位置的信息的。所以我只能另辟蹊径，监听当前dom元素的click事件，获取点击的地方，如果没有，我就获取。解决方案全局监听点击事件，判断日历是否被点击window.document.addEventListener('click',this.handleDocClick,false)解决问题的道路一波三折。这时候，一个新的问题出现了。我发现blur事件总是在click事件之前执行。执行blur后，我即使拿到位置也不能用。blur和click执行顺序解决blur和focus事件不会冒泡，其他form事件可以是click事件；所有元素都有这个事件，会引起冒泡。当元素失去焦点时，blur事件优先于click事件。执行顺序为mousedown>mouseup>click我们只需要将全局监听的点击事件替换为mousedownwindow.document.addEventListener('mousedown',this.handleDocClick,false)handleDocClick(e){consttarget=e.targetif(!this.picker){return}//日历是否被点击this.pickerClicked=contains(this.picker.$el,target)//contains判断日历选择器元素是否包含mousedown点击的元素},//节点包含exportconstcontains=(root,target)=>{//根节点是否包含目标节点constisElement=Object.prototype.toString.call(root).includes('Element')&&Object.prototype.toString.call(target).includes('Element')if(!isElement){returnfalse}letnode=targetwhile(node){if(node===root){returntrue}node=node.父节点}返回false}
