昨天在前端群里讨论到一个问题，大家平时做表单验证的时候一般都有个input框和删除按钮，然后习惯性在失去焦点的时候去验证输入的内容是否正确，做验证，发请求等等。这个时候，那个点击删除按钮往往也就触发了input的失去焦点事件，这个该咋解决呢，经过研究有以下2种方法；

1.

给失去焦点的时间加上延迟时间，让blur时间在click事件后执行，这个方法固然能够解决问题，但是本人并不是很推荐，因为影响性能，不到最后不用这个方法；

2.

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DocumentDocument</title>

</head>

<body>

<input type="text" id="box01"/><input type="button" id="box02" value="删除"/>

<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

    $("#box01").on("blur", function(event) {

        console.log(event.relatedTarget.id=='box02');

        console.log(event.relatedTarget==document.getElementById('box02'));

        console.log($('#box02')[0])

        console.log(event.relatedTarget==$('#box02')[0])

        if(event.relatedTarget==$('#box02')[0])
　　　　 { 
　　　　　　$("#box01").val(''); 
　　　　　　//return; 
 　　　　}else{ alert(1) } }) 

</script></body></html>

就是以上代码了，用的是relatedTarget， w3c官网解释，事件属性返回与事件的目标节点相关的节点。意思就是我在失去焦点的时候，用

relatedTarget判断一下失去焦点的时候是不是那个删除按钮触发的，如果是的话就直接清空input输入框，否则就去请求ajax.
另外说一下，其实这个relatedTarget返回的是事件节点集合，所以我们在获取的时候要取它的第一个元素就好了，
console.log(event.relatedTarget.id=='box02');
console.log(event.relatedTarget==document.getElementById('box02'));

console.log(event.relatedTarget==$('#box02')[0]);
以上这三种方法都是可以的；

但是方法二有个缺陷，我们要确保删除按钮是button 或者 input[type="button"]做的，我试过了，如果是其它标签，比如a，span，
 event.relatedTarget 是 null，因为其他元素获取不到焦点， 那么即便是因为点击 删除按钮 让 input 失去了焦点， 那也得不到 relatedTarget，
反正2种方法各有利弊，自己权衡使用吧。
以上仅代表个人观点，如有错误还望指正。




												


											
click和blur冲突的问题的更多相关文章
	

    
								
  1. 解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能
		
    最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...
    
		
    2. 
						
  2. 如何解决 touchstart 事件与 click 事件的冲突
		
    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
    
		
    3. 
						
  3. click和blur事件冲突解决方案
		
    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...
    
		
    4. 
						
  4. input元素的blur事件与定位在其上面的元素的点击（click）事件冲突的解决方法
		
    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
    
		
    5. 
						
  5. jqurey click和blur执行时间冲突
		
    参考资料:http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event
    
		
    6. 
						
  6. delegate与hover和blur冲突问题及解决方法
		
    一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hov ...
    
		
    7. 
						
  7. 关于easyUI的datebox加失去焦点事件即click、blur等
		
    想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法 例如<input id="txtDate" type="text" ...
    
		
    8. 
						
  8. javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟
		
    示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...
    
		
    9. 
						
  9. touchstart 事件与 click 事件的冲突
		
    const clickEvent = (function() {   if ('ontouchstart' in document.documentElement === true)     retu ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Duplicate entry '4799' for key 'PRIMARY'
			
    增加1条SQL记录报错: Operation failed: There was an error while applying the SQL script to the database. Exe ...
    
			
    2. 
						
  2. SSH 的原理和实践
			
    最近自己在学习使用SSH,现将自己理解的SSH原理和实践SSH的操作写成一篇博客,以供日后查看. 一.SSH是什么?为什么会出现SSH? SSH英文全称是Secure Shell,即安全外壳.首先SS ...
    
			
    3. 
						
  3. IAR MSP430怎么破解？IAR for MSP430安装注册破解激活图文详细教程
			
      IAR for MSP430全称IAR Embedded Workbench for MSP430,是一款功能强大的专业集成开发环境,软件包括项目管理.配置开发环境.创建编译器.定制具体编程方案等 ...
    
			
    4. 
						
  4. (appium+python)UI自动化_02_appium启动手机app
			
    前提:需先安装配置好appium+python自动化环境,已配置好环境的小伙伴可以参考以下步骤启动Android app,具体步骤如下: 一.USB连接手机 (1)手机USB连接电脑 (2)手机打开开 ...
    
			
    5. 
						
  5. Linear Regression and Gradient Descent
			
    随着所学算法的增多,加之使用次数的增多,不时对之前所学的算法有新的理解.这篇博文是在2018年4月17日再次编辑,将之前的3篇博文合并为一篇. 1.Problem and Loss Function  ...
    
			
    6. 
						
  6. Gradient Descent with Momentum and Nesterov Momentum
			
    在Batch Gradient Descent及Mini-batch Gradient Descent, Stochastic Gradient Descent(SGD)算法中,每一步优化相对于之前的 ...
    
			
    7. 
						
  7. Eclipse + pydev插件
			
    在Eclipse中安装pydev插件 启动Eclipse, 点击Help->Install New Software...   在弹出的对话框中,点Add 按钮.  Name中填:Pydev,  ...
    
			
    8. 
						
  8. html+css+js实现简单登陆注册页面
			
    先看一下最终效果,登陆和注册 背景图片: 附源码: login.html <!DOCTYPE html> <html lang="en"> <head ...
    
			
    9. 
						
  9. Reading query string values in JavaScript
			
    时间 2016-01-23 13:01:14  CrocoDillon’s Blog 原文  http://crocodillon.com/blog/reading-query-string-valu ...
    
			
    10. 
						
  10. Spring学习(七)--Spring MVC的高级技术
			
    一.Spring MVC配置的替代方案 我们已经了解如何通过AbstractAnnotationConfigDispatcherServlet- Initializer快速搭建了Spring MVC环 ...
    
			
    11.