click和blur冲突的问题
昨天在前端群里讨论到一个问题，大家平时做表单验证的时候一般都有个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，
click和blur冲突的问题的更多相关文章
- 解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能
最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- click和blur事件冲突解决方案
场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...
- input元素的blur事件与定位在其上面的元素的点击（click）事件冲突的解决方法
在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
- jqurey click和blur执行时间冲突
参考资料:http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event
- delegate与hover和blur冲突问题及解决方法
一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hov ...
- 关于easyUI的datebox加失去焦点事件即click、blur等
想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法 例如<input id="txtDate" type="text" ...
- javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟
示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...
- touchstart 事件与 click 事件的冲突
const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) retu ...
随机推荐
- js new date（）方法移动端兼容
将这个时间字符串"2016-06-07 12:51:21",转换成标准时间格式:Tue May 15 2018 14:06:15 GMT+0800 (中国标准时间) 首先是在安卓上 ...
- SqL语句基础之增删改查
增查删改的SQL语句,如此的实用,下面我就来简单介绍一下它简单的用法. 1.什么是SQL? SQL是用于访问和处理数据库的标准的一种计算机语言. 2.SQL可以做什么? (1)可以向数据库进行查询 ...
- 大数据学习笔记之Zookeeper（二）：Zookeeper实战篇（一）
文章目录 2.1 本地模式安装部署 2.2 配置参数解读 2.1 本地模式安装部署 1)安装前准备: (1)安装jdk (2)通过filezilla工具拷贝zookeeper到到linux系统下 (3 ...
- Vagrant 手册之 Vagrantfile - 机器设置 config.vm
原文地址 配置的命名空间:config.vm config.vm 中的设置修改 Vagrant 管理的机器的配置. 1. 可用的设置项 config.vm.boot_timeout Vagrant 等 ...
- Autoencoder基本操作及其Tensorflow实现
最近几个月一直在和几个小伙伴做Deep Learning相关的事情.除了像tensorflow,gpu这些框架或工具之外,最大的收获是思路上的,Neural Network相当富余变化,发挥所想.根据 ...
- jQuery基础--选择器
2. 选择器 2.1. 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素.注意:jQuery选择器返回的是jQuery对象. jQue ...
- 希希敬敬对Alpha阶段测试报告
已经完成的功能:1 GUI界面效果已经达到了设计要求,经过review代码完成度较好,GUI.PY代码可以使用,完成了“贴吧名字关键字与URL关联”. 2 能够实现"贴吧名字关键字与URL关 ...
- SpringBoot 接口并行高效聚合
转自:juejin.im/post/5d064b90e51d45777540fda7 背景 接口开发是后端开发中最常见的场景, 可能是RESTFul接口, 也可能是RPC接口. 接口开发往往是从各处捞 ...
- Django读写分离
多数据库配置 数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join ...
- linux上执行jmeter脚本
1.linux上安装jmeter 将windows上的zip包直接放到linux上 进入bin目录,chmod 777 jmeter 修改环境变量: 1 2 3 4 # vim /etc/profil ...