Javascript Blur-Click не работает вместе - PullRequest
Новая
       49

Javascript Blur-Click не работает вместе

2 голосов
/ 02 августа 2010

У меня есть следующий код :

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() вызывается первым и удаляет инструкцию, поэтому, если я нажимаю на инструкцию - ничего не происходит.

Как я мог решить это?

Ответы [ 2 ]

3 голосов
/ 02 августа 2010

Если ваша единственная проблема заключается в том, что инструкция скрыта до того, как будет выполнен щелчок, рассмотрите возможность добавления небольшой задержки. Это в основном приведет к выполнению вашей команды скрытия после обработки клика.

Примерно так: 

$('[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
});
1 голос
/ 29 мая 2012 
        var timeoutId;
        $('[type=text]').on("blur", function(){
            timeoutId = setTimeout(function(){                     
                console.log("blur");
            }, 50);
        }).on("focus", function(){
            clearTimeout(timeoutId);
        });

Или вы можете попробовать это, оно будет вызывать размытие, только когда вы покинете ввод («ложный» щелчок удаляется clearTimeout).

...