昨天在前端群里讨论到一个问题,大家平时做表单验证的时候一般都有个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. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  3. click和blur事件冲突解决方案

    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...

  4. input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法

    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...

  5. jqurey click和blur执行时间冲突

    参考资料:http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

  6. delegate与hover和blur冲突问题及解决方法

    一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hov ...

  7. 关于easyUI的datebox加失去焦点事件即click、blur等

    想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法 例如<input id="txtDate" type="text" ...

  8. javascript js 完美解决 click 与 dblclick 冲突,并且不会导致click延迟

    示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...

  9. touchstart 事件与 click 事件的冲突

    const clickEvent = (function() {   if ('ontouchstart' in document.documentElement === true)     retu ...

随机推荐

  1. CSS-同一行的元素高度统一

    一:flex 大法 步骤 设置外部容器 display: flex; 设置内部容器 align-items: stretch; 原理 https://developer.mozilla.org/zh- ...

  2. Red Hat Linux下安装JDK

    1. 下载Linux平台的JDK 下载对应操作系统的jdk,操作系统是32位的就下32位的jdk,64位的就下64位的jdk.下错了装不上的. 下载地址:http://www.Oracle.com/t ...

  3. ajax总结及案例

    一.实验简介 目的:检验输入登录名在数据库中是否存在,如果存在,当鼠标移出登录名框后,会提示用户名已存在,并且鼠标指针自动回到登录名框内. 操作步骤: 1.获取登录名的值 2.根据获取的登录名,组织查 ...

  4. SEC5 - MySQL 查询语句--------------进阶1:基础查询

    # 进阶1:基础查询 /* 语法: select 查询列表 from 表名: 特点: 1.查询列表可以是:表中的字段.常量值.表达式.表达式.函数 2.查询的结果是一个虚拟的表格 如何执行:执行谁,请 ...

  5. VS2012生成Web时报未能找到元数据文件xxx.dll

    问题:引用里已经添加了,还是报‘未能找到元数据文件xxx.dll’ 解决:添加了相同的不同路径的xxx.dll文件,删掉一个用不到的,就不报错了

  6. 微信小程序列表时间戳转换

    第一步先写js   随便命名为times.js function toDate(number){     var n=number * 1000;     var date = new Date(n) ...

  7. Self-Attention 和 Transformer

    1.Self-Attention 之前的RNN输入是难以并行化的,我们下一个输入可能依赖前一个输出,只有知道了前面的输出才能计算后面的输出. 于是提出了 self-attention ,但是这时候 $ ...

  8. c.vim

    放在 /usr/share/vim/vim80/syntax/c.vim 最后: syn match cFunctions "\<[a-zA-Z_][a-zA-Z_0-9]*\> ...

  9. Codeforces Round #460 (Div. 2) B Perfect Number(二分+数位dp)

    题目传送门 B. Perfect Number time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  10. wangEditor 文本编辑器

    参考:https://www.cnblogs.com/Scholars/p/8968838.html 下载:http://www.wangeditor.com/ 前端代码: <script ty ...