Как я могу запустить событие размытия Javascript после события клика, которое вызывает размытие?

Ответ 1

У нас была аналогичная проблема на работе. что мы выяснили в конце было то, что событие mousedown будет срабатывать перед событием размытия позволяя вам установить контент до проверки или даже отменить проверку полностью используя флаг.

проверьте эту скрипту, которую я сделал с помощью вашего примера - http://jsfiddle.net/dL3K3/31/

$(function(){
    var flag = true;
    $('input').blur(function(){
        if(!$(this).val() && flag){
            alert("Grrr, It empty");
        }
    });

    $('button').mousedown(function(){
        flag = false;
    });    
    $('button').mouseup(function(){
        flag = true;
        $('input').val('content').focus();
    });

});

-Edit-

Как @mclin Предлагаемый, использование события mousedown и preventDefault предотвратит размытие. И вы можете просто оставить исходное событие клика неповрежденным -

http://jsfiddle.net/dL3K3/364/

$(function(){
    $('input').blur(function(){
        if(!$(this).val()){
            alert("Grrr, It empty");
        }
    });

    $('button').mousedown(function(e){
        e.preventDefault();
    });    
    $('button').click(function(){
        $('input').val('content');
    });

});

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

Ответ 2

У меня есть лучшее решение, чем у Йони Джа: вызов preventDefault в событии mousedown кнопки. OnBlur никогда не бывает так, что вы можете делать что угодно в событии click.

Это лучше, потому что это не изменяет поведение кликов, заставляя что-то происходить на мыши, а не на мышь, что может быть неожиданным.

Ответ 3

Это также может помочь:

Установите таймер, который задерживает действие события размытия, прежде чем он запустит событие нажатия кнопки.

// Namespace for timer var setTimer = { timer: null }

    $('input,select').blur(function () {
        setTimer.timer = setTimeout(function () {
           functionCall();
        }, 1000);
    });

    $('input,select').focus(function () {
        setTimer.timer = setTimeout(function () {
            functionCall();
        }, 1000);
    });

    $("#btn").click(function () {
        clearTimeout(setTimer.timer);
        functionCall();
    });

Ответ 4

Разделите логику проверки ввода на свою собственную функцию, которая автоматически вызвана событием размытия, а затем событием клика после изменения значения в поле ввода. Правда, ваша логика проверки будет вызываться дважды, но я не вижу способ обойти это без внесения больших изменений.

Пример использования jQuery:

$('input').blur(function() {
    validate(this);
});

$('submit').click(function() {
   //modify the input element
   validate(inputElement);
});

var validate = function(obj) {
   // validate the object
}

Ответ 5

Иногда бывает полезно получить дочерний объект в mouseup, но родитель хочет скрыть свои дети на размытие. Мы можем отменить скрытие элементов-потомков, а затем подождать, пока наш мыши не появится, а затем заставить размытие появиться, когда мы будем готовы

JS

var cancelHide = false;

$('.my-input').blur(function() {
    if (!cancelHide) {
        $('.my-item').hide();
    }
});

$('.my-input').click(function() {
    $('.my-item').show();
});

$('.my-item').mousedown(function() {
    cancelHide = true;
});

$('.my-item').mouseup(function() {
    var text = $(this).text();
    alert(text);
    cancelHide = false;
    $('.my-input').blur();
});

HTML

<input type="text" class="my-input"/>
<div class="my-item">Hello</div>
<div class="my-item">Lovely</div>
<div class="my-item">World</div>

CSS

.my-item {
    display:none;
}

https://jsfiddle.net/tic84/on421rxg/

Нажатие на элементы списка будет отображаться только при нажатии кнопки мыши, несмотря на то, что родитель пытается скрыть их при размытии

Ответ 6

Трюк заключается не в том, чтобы использовать размытие и щелчки, потому что они всегда выполняются в порядке размытия, а затем - в секундах. Вместо этого вы должны проверить, изменился ли элемент с фокусом, потому что это происходит только после нажатия.

Я думаю, что у меня есть элегантное решение для этого:

var alreadyValidated = 'true';

setInterval(function(){
    if(document.activeElement.id != 'validation-field-id'){
        if(alreadyValidated=='false'){
            alreadyValidated = 'true';
            validate(document.activeElement);       
        }
    }
    else {
        alreadyValidated = 'false';
    }
}, 200);

В наши дни все современные браузеры поддерживают document.activeElement.