解决blur和onclick冲突问题

场景:如下图所示,当点击X按钮时,会同时触发blur和onclick事件,此时不需要执行blur事件中代码,只执行onclick事件中代码。
在这里插入图片描述

代码示例:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  
  $("input").blur(function(e){
    console.log(e.relatedTarget.className);
    if(e.relatedTarget && typeof e.relatedTarget.className != 'undefined' && e.relatedTarget.className == 'test'){
        return false;
	}
    $("input").css("background-color","#D6D6FF");
  });
});
 function test(){
	alert(123);
 }
</script>
</head>
<body>
Enter your name: <input type="text" />
<p><button id="btn1" onclick="test()" class="test">触发</button></p>
</body>
</html>

代码说明:上边示例中,使用到了relatedTarget,在触发blur的时候,返回当前事件涉及到的其他DOM元素,以判断鼠标点击了哪儿。
扩展划重点:此示例中点击时间$(“input”).blur(function(e)({})中的e,打印出来,会看到很多属性,可以利用其中属性做很多其他事情,不仅仅是处理本文描述的场景。此示例中e打印出来如下图:
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值