场景:如下图所示,当点击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
打印出来如下图: