Как обнаружить размытие, которое срабатывает при наведении мыши вверх?

Question

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

Есть ли уже тип события, которое я могу прослушать, чтобы справиться с этим?Если нет, то как лучше всего обрабатывать события такого типа?

Answer 1

Я бы сказал, нет, такого события нет. И я не думаю, что есть идеальный способ справиться с этим

Я постараюсь справиться с этим

• добавление глобальной переменной, значение по умолчанию -1 и значение 1, когда форма получает фокус.

• добавление обработчика mousedown к документу, когда форма получает фокус. Он установит глобальную переменную равной 1.

  • При срабатывании он проверит, все ли в форме (используя event.target). Если это так, пусть 1, иначе установите его на 0.

• Обработчик mousedown будет иметь event.preventDefault; и return false;. Это может вызвать проблемы у ваших других eventHandlers . Чтобы избежать таких неприятностей, я постараюсь зафиксировать события, которые могут быть повреждены на этапе захвата, а не пузырящегося.

• добавление обработчика mouseup к документу, когда форма получает фокус. В нем проверьте, имеет ли переменная значение 0. Если да, то выполните задание размытия и удалите два специальных обработчика.

Но это может иметь некоторую слабость (особенно если пользователь покидает окно, пока нажата мышь).

Надеюсь, это понятно, я постараюсь опубликовать скрипку как можно скорее.

РЕДАКТИРОВАТЬ: Вот скрипка . Однако обратите внимание, что я нацеливаю внимание на форму, и она работает только на одном. Я сделал это, потому что похоже, что форма никогда не фокусируется иначе (вероятно, связана со способом обработки событий jsfiddle). Но в теории это должно работать без строки $("form").focus();.

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

Answer 2

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

var blurControlID;

$("selector").blur(function () {
    blurControlID = this.id;
});

$("selector").onMouseUp(function() { 
    if (blurControlID != "")
    {    
        if (this.id != blurControlID)
        {//do what you want
            blurControlID = "";
        }
    }
});

Answer 3

Я столкнулся с подобной проблемой и обработал ее таким образом (я использовал jQuery для событий, но вы, конечно, можете использовать addEventListener вместо этого):

// Catch the blur event.
$('#myinput').blur(function () {
    // Record the input the blur event happened on.
    var input = this;
    // Catch the mouseup event once, on either the window or the input.
    $(window).add(input).one('mouseup', function (e) {
        // If the mouseup event happened on the input, prevent
        // propagation up to the window, and don't do anything else.
        if (input === this) {
            e.stopPropagation();
            return;
        }
        // Otherwise, wait for any other click handlers to run.
        // In my code, this is used to detect if a user clicked
        // a "cancel" button, rather than just leaving the input.
        setTimeout(function () {
            // Do what you need to do.
            // In my code, this calls a REST API to save the input,
            // or has no effect if the user previously clicked cancel.
        }, 0);
    });
});

Answer 4

Вы можете вызвать функцию в атрибуте onmouseup тега body.

<body onmouseup="doWhatINeed();">

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

Редактировать: Не зная цели, я могу привести грубый пример конкретного типа цели ...

Javascript:

var hasBeenDone = false;

function doWhatINeed() {
  if(!hasBeenDone) {
    //do what is required
    hasBeenDone = true;
}

function anotherFunction() {
  //some other stuff which requires the mouseup event to fire again for the element in question...
  hasBeenDone = false;
}

Это подход, который я использовал бесчисленное количество раз для подобных обстоятельств и никогда не был проблематичным.