Question

HTML：

<input type='text' class='a' />
<div class='inst' tag='a'></div>
<input type='text' class='b' />
<div class='inst' tag='b'></div>
<input type='text' class='c' />
<div class='inst' tag='c'></div>

JS：

$(function() {
    $('.inst').click(function() {
        alert($(this).attr('tag') + ' clicked');
    });

    $('[type=text]').focus(function() {
       show_inst($(this).attr('class'));
    }).blur(function() {
       //hide_inst($(this).attr('class'));
    });

    function show_inst(tag) {
        $('div.inst[tag=' + tag + ']').html(tag + ' instructions');
    }

    function hide_inst(tag) {
        $('div.inst[tag=' + tag + ']').html('');
    }
});

CSS：

.inst {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    cursor: pointer;
}

工作正常：单击inst时，我会看到警告消息，当输入变得聚焦时，指令会出现。

现在我希望不相关的指令在模糊时消失。所以我尝试在blur()中添加注释行。它不起作用，因为blur()首先被调用并删除指令，所以如果我点击指令 - 没有任何反应。

我怎么解决这个问题？

Answer 1

如果您的唯一问题是指令在发出指令之前被隐藏，请考虑添加一个小延迟。这基本上会导致在处理点击后执行隐藏指令。

这样的事情：

$('[type=text]').focus(function() {
   show_inst($(this).attr('class'));
}).blur(function() {
   setTimeout(function(){
     hide_inst($(this).attr('class'));
   }, 50); // make this happen after any other events
});

Answer 2

        var timeoutId;
        $('[type=text]').on("blur", function(){
            timeoutId = setTimeout(function(){                     
                console.log("blur");
            }, 50);
        }).on("focus", function(){
            clearTimeout(timeoutId);
        });

或者你可以试试这个，它只会在你离开输入时闪现模糊（“假”点击被clearTimeout删除）。

Javascript模糊点击不一起工作

2 个答案: