为什么先执行失去焦点函数再执行点击事件

fantastxcy 2015-06-08 11:47:28
为什么先执行失去焦点函数再执行点击事件？

当我点击.txt_sp3的时候，直接执行.txt_sp2失去焦点的函数，要怎样才能先执行.txt_sp3的点击事件？

<div class='txt name fixed'>

			<span class='txt_sp1'></span>

			<input type='text' id='txtname' maxlength='10'  class='txt_sp2' placeholder='资金帐号' />

			<span class='txt_sp3'></span>

			<span class='txt_sp4'></span>

			<span class='txt_sp6'>帐号不能为空</span>

		</div>

		<div class='txt pwd fixed'>

			<span class='txt_sp1'></span>

			<input type='password' id='txtpwd'  maxlength='6' class='txt_sp2' placeholder='交易密码' />

			<span class='txt_sp3'></span>

			<span class='txt_sp4'></span>

			<span class='txt_sp6'>密码不能为空</span>

		</div>



//删除文本框内容

        $('.txt_sp3').click(function(){

           

            $(this).prev().val('');

            $(this).prev().focus();



        })



        //当前文本框失去焦点时

        $('.txt_sp2').blur(function(){

         

        	$(this).prev().removeAttr("style");//变换图标

            var isClick=false;

            //判断文本框内容是否正确并提示

        	var n=$(this).val();

        	if (n.length==0||isNaN(n)) {



        		$(this).parent().css({'background':'url(images/txtbg2.png) no-repeat'});

        		$(this).next().css('display','none');

        		$('.txt_sp5').css('display','block');

        		$(this).parent().children('.txt_sp4').css('display','block');



                //弹出提示框效果

        		$(this).parent().each(function() {

		                $(this).stop()

		                	.animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)

		                    .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)

		                    .animate({ left: "0px" }, 50)

		            });

        		$(this).parent().children('.txt_sp4').click(function(){

        			$(this).parent().children('.txt_sp6').css('display','block');

        		})

        	}else{

        		$(this).parent().removeAttr('style');

        		x=1;

        	}

        	var name=$('#txtname').val();

        	var pwd=$('#txtpwd').val();

        	if (isNaN(name)) {

        		$('.name>.txt_sp6').html('帐号必须为10位数字');

        	}

        	if (isNaN(pwd)) {

        		$('.name>.txt_sp6').html('密码必须为6位数字');

        	}

            if (name.length==0) {

                $('.pwd>.txt_sp6').html('帐号不能为空');

            }

             if (pwd.length==0) {

                $('.pwd>.txt_sp6').html('密码不能为空');

            }

        })
...全文
702 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2015-06-08
  • 打赏
  • 举报
 回复
txt_sp2 的blur 事件里面的 代码 用 settimeout 执行
tommercatfly 2015-06-08
  • 打赏
  • 举报
 回复
如果以一定要先触发click函数，那么你可以考虑触发一个click事件记录触发这个事件的对象，然后在你点击txt_sp3后再触发之前那个对象失去焦点后需要操作的内容，就是不要设置默认的失去焦点事件了
tommercatfly 2015-06-08
  • 打赏
  • 举报
 回复
从你给出的html中可以发现txt_sp3高，宽都是0，所以在页面上txt_sp3是不会显示的，完全点击不到，但可以看到有class，如果你的css是写在其他地方麻烦贴出来，不然没办法测试找到你的问题，另外，你的问题其实是不存在的，如果你先点击txt_sp2的话，再点击txt_sp3肯定会先触发txt_sp2的失去焦点函数，因为本来就是txt_sp2先失去焦点，如果你先点击txt_sp3，那么就只会触发txt_sp3的click函数
fantastxcy 2015-06-08
  • 打赏
  • 举报
 回复
引用 6 楼 fantastxcy 的回复:
[quote=引用 5 楼 showbo 的回复:] $('.txt_sp2').blur里面代码延时执行一下 


    $('.txt_sp2').blur(function () {
        var me = this;////////////////做好闭包指向对象
        setTimeout(function () {
            $(me).prev().removeAttr("style"); //变换图标
            var isClick = false;
            //判断文本框内容是否正确并提示
            var n = $(me).val();
            if (n.length == 0 || isNaN(n)) {

                $(me).parent().css({ 'background': 'url(images/txtbg2.png) no-repeat' });
                $(me).next().css('display', 'none');
                $('.txt_sp5').css('display', 'block');
                $(me).parent().children('.txt_sp4').css('display', 'block');

                //弹出提示框效果
                $(me).parent().each(function () {
                    $(this).stop()
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "0px" }, 50)
                });
                $(me).parent().children('.txt_sp4').click(function () {
                    $(this).parent().children('.txt_sp6').css('display', 'block');
                })
            } else {
                $(me).parent().removeAttr('style');
                x = 1;
            }
            var name = $('#txtname').val();
            var pwd = $('#txtpwd').val();
            if (isNaN(name)) {
                $('.name>.txt_sp6').html('帐号必须为10位数字');
            }
            if (isNaN(pwd)) {
                $('.name>.txt_sp6').html('密码必须为6位数字');
            }
            if (name.length == 0) {
                $('.pwd>.txt_sp6').html('帐号不能为空');
            }
            if (pwd.length == 0) {
                $('.pwd>.txt_sp6').html('密码不能为空');
            }
        }, 100);
    });
用这种方式会报错 提示jq库出错 Cannot read property 'toLowerCase' of undefined [/quote] 这个错误是因为在setTimeout里不能声明变量 把变量拿出来就可以了 多谢了
fantastxcy 2015-06-08
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
$('.txt_sp2').blur里面代码延时执行一下 


    $('.txt_sp2').blur(function () {
        var me = this;////////////////做好闭包指向对象
        setTimeout(function () {
            $(me).prev().removeAttr("style"); //变换图标
            var isClick = false;
            //判断文本框内容是否正确并提示
            var n = $(me).val();
            if (n.length == 0 || isNaN(n)) {

                $(me).parent().css({ 'background': 'url(images/txtbg2.png) no-repeat' });
                $(me).next().css('display', 'none');
                $('.txt_sp5').css('display', 'block');
                $(me).parent().children('.txt_sp4').css('display', 'block');

                //弹出提示框效果
                $(me).parent().each(function () {
                    $(this).stop()
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "0px" }, 50)
                });
                $(me).parent().children('.txt_sp4').click(function () {
                    $(this).parent().children('.txt_sp6').css('display', 'block');
                })
            } else {
                $(me).parent().removeAttr('style');
                x = 1;
            }
            var name = $('#txtname').val();
            var pwd = $('#txtpwd').val();
            if (isNaN(name)) {
                $('.name>.txt_sp6').html('帐号必须为10位数字');
            }
            if (isNaN(pwd)) {
                $('.name>.txt_sp6').html('密码必须为6位数字');
            }
            if (name.length == 0) {
                $('.pwd>.txt_sp6').html('帐号不能为空');
            }
            if (pwd.length == 0) {
                $('.pwd>.txt_sp6').html('密码不能为空');
            }
        }, 100);
    });
用这种方式会报错 提示jq库出错 Cannot read property 'toLowerCase' of undefined
Go 旅城通票 2015-06-08
  • 打赏
  • 举报
 回复
$('.txt_sp2').blur里面代码延时执行一下 


    $('.txt_sp2').blur(function () {
        var me = this;////////////////做好闭包指向对象
        setTimeout(function () {
            $(me).prev().removeAttr("style"); //变换图标
            var isClick = false;
            //判断文本框内容是否正确并提示
            var n = $(me).val();
            if (n.length == 0 || isNaN(n)) {

                $(me).parent().css({ 'background': 'url(images/txtbg2.png) no-repeat' });
                $(me).next().css('display', 'none');
                $('.txt_sp5').css('display', 'block');
                $(me).parent().children('.txt_sp4').css('display', 'block');

                //弹出提示框效果
                $(me).parent().each(function () {
                    $(this).stop()
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50)
                            .animate({ left: "0px" }, 50)
                });
                $(me).parent().children('.txt_sp4').click(function () {
                    $(this).parent().children('.txt_sp6').css('display', 'block');
                })
            } else {
                $(me).parent().removeAttr('style');
                x = 1;
            }
            var name = $('#txtname').val();
            var pwd = $('#txtpwd').val();
            if (isNaN(name)) {
                $('.name>.txt_sp6').html('帐号必须为10位数字');
            }
            if (isNaN(pwd)) {
                $('.name>.txt_sp6').html('密码必须为6位数字');
            }
            if (name.length == 0) {
                $('.pwd>.txt_sp6').html('帐号不能为空');
            }
            if (pwd.length == 0) {
                $('.pwd>.txt_sp6').html('密码不能为空');
            }
        }, 100);
    });
fantastxcy 2015-06-08
  • 打赏
  • 举报
 回复
引用 1 楼 tommercatfly 的回复:
从你给出的html中可以发现txt_sp3高，宽都是0，所以在页面上txt_sp3是不会显示的，完全点击不到，但可以看到有class，如果你的css是写在其他地方麻烦贴出来，不然没办法测试找到你的问题，另外，你的问题其实是不存在的，如果你先点击txt_sp2的话，再点击txt_sp3肯定会先触发txt_sp2的失去焦点函数，因为本来就是txt_sp2先失去焦点，如果你先点击txt_sp3，那么就只会触发txt_sp3的click函数
这是完整的代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=640,target-densitydpi=320, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <section id='bg'></section> <section id='logo'> <img src='images/logo.png' /> </section> <section id='form'> <div class='tit'></div> <div class='txt name fixed'> <span class='txt_sp1'></span> <input type='text' id='txtname' maxlength='10' class='txt_sp2' placeholder='资金帐号' /> <span class='txt_sp3'></span> <span class='txt_sp4'></span> <span class='txt_sp6'>帐号不能为空</span> </div> <div class='txt pwd fixed'> <span class='txt_sp1'></span> <input type='password' id='txtpwd' maxlength='6' class='txt_sp2' placeholder='交易密码' /> <span class='txt_sp3'></span> <span class='txt_sp4'></span> <span class='txt_sp6'>密码不能为空</span> </div> <div class='txt code fixed'> <span class='txt_sp1'></span> <input type='text' style='width:290px;' maxlength='4' class='txt_sp2' placeholder='验证码' /> <span class='txt_sp5'><img src="images/code.png" /></span> </div> <p class='tips'>刷脸开户时代，拼的就是高颜值！刷脸开户时代，拼的就是高颜值！</p> <a href="#" id='btn' value='0'><img src="images/btn.png" /></a> </section> <script src='js/jquery.1.10.1.min.js'></script> <script> var x=0;//判断信息是否正确 0为正确 1为错误 //当前文本框获取焦点时 $('.txt_sp2').focus(function(){ $(this).prev().css('background-position-x','-45px');//变换图标 $(this).next().css('display','block');//显示删除按钮 $(this).parent().children('.txt_sp4').css('display','none');//隐藏提示按钮 $('.txt_sp6').css('display','none');//隐藏提示框 }) //删除文本框内容 $('.txt_sp3').click(function(){ $(this).prev().val(''); $(this).prev().focus(); }) //当前文本框失去焦点时 $('.txt_sp2').blur(function(){ $(this).prev().removeAttr("style");//变换图标 //判断文本框内容是否正确并提示 var n=$(this).val(); if (n.length==0||isNaN(n)) { $(this).parent().css({'background':'url(images/txtbg2.png) no-repeat'}); $(this).next().css('display','none'); $('.txt_sp5').css('display','block'); $(this).parent().children('.txt_sp4').css('display','block'); //弹出提示框效果 $(this).parent().each(function() { $(this).stop() .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50) .animate({ left: "-5px" }, 50).animate({ left: "5px" }, 50) .animate({ left: "0px" }, 50) }); $(this).parent().children('.txt_sp4').click(function(){ $(this).parent().children('.txt_sp6').css('display','block'); }) }else{ $(this).parent().removeAttr('style'); x=1; } var name=$('#txtname').val(); var pwd=$('#txtpwd').val(); if (isNaN(name)) { $('.name>.txt_sp6').html('帐号必须为10位数字'); } if (isNaN(pwd)) { $('.name>.txt_sp6').html('密码必须为6位数字'); } if (name.length==0) { $('.pwd>.txt_sp6').html('帐号不能为空'); } if (pwd.length==0) { $('.pwd>.txt_sp6').html('密码不能为空'); } }) //提交按钮事件 $('#btn').click(function(){ var i=$(this).val() //当输入有误时 if (x==0) { $('.code').stop().animate({opacity:'1'},500);//验证码效果 $('.tips').stop().animate({top:'330px'},500);//验证码下提示文字效果 $('#btn').stop().animate({top:'420px'},500);//按钮效果 i++; $(this).val(i); }else{ window.location="fin.html";//x等于1时跳转链接 } }) </script> </body> </html> css页： body{ margin:0; background-color: #efeff4; font-family: "微软雅黑"; letter-spacing:2px; background: #00488a; } ul,li,a,h1,h2,h3,h4,h5,h6,p,input{margin: 0;padding: 0;list-style:none;text-decoration: none;} /*global*/ .fixed{ *zoom:1; } .fixed:after{ content: "."; height:0; clear:both; overflow: hidden; display: block; } #bg{ width:100%; height:1080px; background:url(../images/bg.jpg) no-repeat; position:absolute; left:0;top:0; margin: auto; } #bg2{ width:100%; height:1080px; background:url(../images/bg.jpg) no-repeat; position:absolute; left:0;top:0; margin: auto; } /*首页*/ #logo{width: 100%;position: absolute;top: 120px;} #logo img{width: 410px;height: 70px;display: block;margin: 0 auto;} #form{width: 100%;position: absolute;top: 250px;} #form .tit{width: 520px;height: 36px;background: url(../images/tit1.png) no-repeat;position: absolute;top: 0;left: 0;right: 0;margin: auto;} #form .txt{width: 528px;height: 80px;background: url(../images/txtbg.png) no-repeat;position:absolute;left: 0;right: 0;margin: auto;} #form .name{top: 60px;} #form .pwd{top: 150px;} #form .code{top: 240px;opacity: 0;} #form .txt .txt_sp1{ float: left;width: 42px;height: 42px;background: url(../images/icon.png) no-repeat;margin: 20px 15px 20px 25px;} #form .txt .txt_sp2{float: left;width: 350px;height: 70px;margin: 5px 0; border: none;background: none;font-size: 28px;color: #fff;} #form .txt .txt_sp3{display: none; float: left;width: 42px;height: 42px;background: url(../images/icon.png) no-repeat -45px -131px;margin: 20px 15px 20px 25px;} #form .txt .txt_sp4{display: none; float: left;width: 42px;height: 42px;background: url(../images/icon.png) no-repeat 0 -131px;margin: 20px 15px 20px 25px;} #form .txt .txt_sp5{float: left;width: 120px;height: 50px;margin: 16px;} #form .txt .txt_sp5 img{width: 120px;height: 50px;} #form .pwd .txt_sp1{background-position: 0 -40px;} #form .code .txt_sp1{background-position: 0 -84px;} #form .txt .txt_sp6{padding-left: 60px;font-size: 20px;line-height: 90px;color: #fff;display: none; width:390px;height: 90px;position: absolute;top: -85px;left: 70px;background: url(../images/tip.png) no-repeat;} #form .tips{width: 488px;padding: 0 20px;font-size: 20px;color: #fff;left: 0;right: 0;margin: auto;top: 240px;position: absolute;line-height: 30px;} #btn{width: 360px;height: 76px; display: block;top: 340px;left: 0;right: 0;margin: auto;position: absolute;}
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
jquery 事件执行检测代码
前两天做城市搜索的时候，我对搜索按钮绑定了事件，如果输入栏内的文字不符合要求就用标签提示（标签展示出来后对document绑定click，点击后隐藏标签）并使输入栏获得焦点。就这样一个小功能我调试了、3个多小时，IE 里表现的是标签一闪而过，后来发现是按钮的点击事件和input的交替出发了多次，估计是事件回退发生的，用了preventDefault() 和 stopPropagation()两个函数后修正了问题。虽然问题解决了，但是事件的执行顺序真是很难掌握呀，于是我做了个简单的事件监测函数，可以自动记录页面事件触发，见如下代码（首先肯定要引入jquery!…） 代码如下://事件执行监测
获取焦点时,利用js定时器设定时间执行动作
进入正题，先说说定时器。 在javascritp中，有两个关于定时器的专用函数，分别为： 1.倒计定时器：timename=setTimeout(“function();”,delaytime); 2.循环定时器：timename=setInterval(“function();”,delaytime); 第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成 “alert(‘第一个警告窗口!’);alert(‘第二个警告窗口!’);”；而第二个参数“delaytime
21个JavaScript事件(Events)属性汇总
1、js事件通常和函数结合来使用，这样可以通过发生的事件来驱动函数的执行，从而引起html出现不同的效果。 2、属性（当这些事件的属性发生时，会触发function{}的函数）： 1）onabort:当图像加载被中断时，会引发function内的函数。 2）onbur:当元素失去焦点； 3）onfocus:当元素获得焦点 4）onclick:鼠标点击某个对象 5）ondbclick:鼠标双击某个对象 6）onerror:当加载文档或图像时发生某个错误 7）onchange:当用户改变域的内容（onchange事件常结合对输入的字段验证来使用，常用语表单验证身份证、邮箱注册及登录、区号等等的
jQuery快速高效制作网页交互特效
jQuery中的事件 1，基础事件 基础事件又包括  a：window事件 在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文档就绪事件，对应的方法ready() $(document).ready(fn(){});  b：鼠标事件 常用的鼠标事件有：       click(fn);         单机鼠标时发生，fn表示绑定的函数       keydown(fn);  鼠标指针移过时，fn表示绑定函数       blur(fn)          鼠标指针移出时，失去焦点时，所执行的函数   
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章