как предотвратить событие фокуса в IE, когда происходит mousedown

event.preventDefault(); return false; event.stopPropagation();

любой из них может предотвратить событие фокуса, когда я запускаю событие mousedown в Firefox и Chrome, но это не удалось в IE. На самом деле, у Chrome есть другая проблема. когда mousedowning, :hover css не работает. `

<input type="text" id="name">
<div id="suggest">
  <div>mark</div>
  <div>sam</div>
  <div>john</div>
</div>
$("#name").focus(suggest.show).blur(suggest.hide);

` то, что я ожидал, это когда я щелкаю вложенный элемент, например «sam», а затем $ («#name»). val («sam»). но проблема в том, что когда я нажимаю мышь (просто нажимаю кнопку мыши, а не отпускаю), $("#name").blur запускается немедленно и предлагает скрыть div.


javascript focus internet-explorer preventdefault mousedown
person Jinceon    schedule 21.03.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Используйте :active вместо :hover, чтобы CSS применялся, когда кнопка мыши нажата.

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

$("html").on("focus", "#name", function() {
    $("#suggest").show();
}).mousedown(function() {
    $("#suggest").hide();
}).on("mousedown", "#name, #suggest", function(e) {
    e.stopPropagation();
});​

jsFiddle: http://jsfiddle.net/nbYnt/2/

Если вам не нужна поддержка IE7, вы можете сделать это, используя только CSS (и он работает точно так, как ожидается в любом современном браузере, включая IE8):

#suggest {
    display: none;
}

#name:focus + #suggest, #suggest:focus {
    border: none;
    display: block;
}

Обратите внимание, что вам нужно поместить tabindex в div, чтобы метод CSS работал:

<div id="suggest" tabindex="-1">

jsFiddle: http://jsfiddle.net/nbYnt/1/

Наконец, вы можете ошибиться в том, что div исчезнет, ​​объединив JavaScript с CSS (это работает в IE7):

#suggest:hover {
    display: block !important;
}

$("#name").focus(function() {
    $("#suggest").show();
}).blur(function() {
    $("#suggest").hide();
});

Проблема с этим методом заключается в том, что после нажатия на div простое перемещение мыши приведет к исчезновению div.

jsFiddle: http://jsfiddle.net/nbYnt/4/

person Brilliand    schedule 13.05.2012

arrow_upward
16
arrow_downward

Вы можете использовать атрибут «unselectable» для предотвращения потери фокуса в IE и обработчик mousedown для других.

<input type="text" id="name">

<div onmousedown="return false" unselectable="on" id="suggest">
  <div unselectable="on">mark</div>
  <div unselectable="on">sam</div>
  <div unselectable="on">john</div>
</div>
person nameoutname    schedule 08.07.2013
comment
РЕБЯТА, ЭТО ГЕНИАЛЬНО, вы, кажется, единственный человек в мире, который заметил, что атрибут unselectable предотвращает кражу фокуса при наведении курсора мыши в IE‹9. Упрощение: вместо того, чтобы добавлять атрибут к каждому отдельному элементу, вы можете просто установить свойство при наведении мыши, например. onmousedown="event.target.unselectable = true; return false. jsbin.com/yagekiji/1 - person Han Seoul-Oh; 30.04.2014
comment
Блестящий. Это легко решило мою проблему, спасибо @nameoutname! - person brad; 15.01.2015
comment
Это чистое золото! Работает отлично! Особенно версия, которую предлагает @Han. - person SQiShER; 18.03.2016

arrow_upward
0
arrow_downward

Лучшее решение, которое я нашел во время своего исследования, — это вызывать функции preventDefault и stopPropagation не для события «mousedown», а вместо этого для «pointerdown».

Похоже, что любой браузер запускает событие «pointerdown» перед событием «mousedown», и предотвращение события «pointerdown» также предотвращает фокус.

person Nikola    schedule 10.02.2020