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

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

6 голосов
/ 21 марта 2012

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

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

Ответы [ 2 ]

14 голосов
/ 08 июля 2013

Вы можете использовать атрибут «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>
0 голосов
/ 13 мая 2012

Использование: активно вместо: наведите курсор на 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/

...