的JavaScript模糊点击不合群

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; 
}

它正常工作：当时点击我看到了提示信息，当输入变为焦点时，指令出现。

现在我想让不相关的指令在模糊时消失。所以我试图在blur()内添加注释行。它不起作用，因为blur()被首先调用并删除指令，所以如果我点击指令 - 什么都不会发生。

我该如何解决这个问题？

来源

2010-08-02 Misha Moroshko

因此，指令需要留在div当你点击它，当你点击任何其他指令需要消失？ – Fabian 2010-08-02 07:10:12

是的。什么是实施这个最好的方法？ – 2010-08-02 07:29:20

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

事情是这样的：

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

来源

2010-08-02 11:22:47

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

或者你可以试试这个，它只会当你离开输入（“假”点击通过clearTimeout删除）消防模糊。

来源

2012-05-29 11:11:15

的JavaScript模糊点击不合群

回答

相关问题