1

好的，我的一段代码看起来像这样：

<div id="left" style="float:left; width:100px; margin-right:10px;">
<input id="first" value="something">
</div>
<div id="right" style="margin-left:20px; float:left; width:200px;">
<input id="second" value="something">
<input id="third" value="something">
<input id="fourth" value="something">
</div>

jQuery：

$(function() {

$("#right").focusin(function() {
      $( "#left" ).animate({
        width: "200px"
      }, 500 ); 
      $( "#right" ).animate({
        width: "100px"
      }, 500 );   
});
$("#right").focusout(function() {
      $("#left").animate({
        width: "100px"
      }, 500 ); 
      $("#right").animate({
        width: "200px"
      }, 500 ); 
});

})

但是当我在右 div 上的输入之间单击时，它会调用 focusin/out，如何防止这种情况发生？

演示： https ://jsfiddle.net/swfzmdfd/

4

2 回答 2

0

当您单击让我们在单击第二个 id 后说第三个 id 时，基本上这两个事件都会被触发，针对 id 右下的元素的焦点输入和焦点输出。因此。

如果你想避免这种情况，你可以添加点击代替/

$("#right").click(function() {

// do this 
});
$("#left").click(function() {
 // do this 
});
于 2016-11-07T00:27:05.393 回答
0

activeElement如果是其他输入之一，您可以使用计时器而不执行动画

$(function() {
    $("#right").focusin(function(e) {
        $("#left").stop(true,true).animate({
            width: "200px"
        }, 500);
        $("#right").stop(true,true).animate({
            width: "100px"
        }, 500);
    });
    $("#right").focusout(function() {
    	setTimeout(function() {
        	if ( !($(document.activeElement).closest('#right').length && 
                   $(document.activeElement).is('input'))) {
                $("#left").animate({
                    width: "100px"
                }, 500);
                $("#right").animate({
                    width: "200px"
                }, 500);
            }
        },100);
    });

})
input {
    width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left" style="float:left; width:100px; margin-right:10px;">
    <input id="first" value="something">
</div>
<div id="right" style="margin-left:20px; float:left; width:200px;">
    <input id="second" value="something">
    <input id="third" value="something">
    <input id="fourth" value="something">
</div>

于 2016-11-07T00:37:22.943 回答