Javascript模糊点击不能一起工作 [英] Javascript blur-click not working together

问题描述

我有以下代码：

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 点击我看到警告消息，当输入变得聚焦时，出现指令。

It works fine: when inst is clicked I see the alert message, and when the input becomes focused the instruction appears.

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

Now I want the not relevant instruction to disappear on blur. So I tried to add the commented line inside blur(). It does not work like that because blur() is called first and removes the instruction, so if I click on the instruction - nothing happens.

我如何解决这个问题？

推荐答案

如果你唯一的问题是点击它发出，考虑添加一个微小的延迟。

If your only issue is that the instruction is hidden before the click on it is issued, consider adding a tiny delay. This will basically cause your hide instruction to be executed after the click is processed.

这样的东西：

$('[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
});

这篇关于Javascript模糊点击不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！