Как я удаляю фокус onmousedown в IE?
Конечная цель: симпатичные страницы для пользователей мыши, доступные страницы для пользователей клавиатуры. Эффект, который я хочу, для нажатия на привязку, чтобы не произвести схему во время и не оставить схему после. Далее, я хочу, чтобы переключение вкладок клавиатуры переместило фокус и таким образом окружило объекты схемой. Следующий код работает в FF (и я принимаю другие современные браузеры, но я должен буду протестировать их завтра в офисе), но не IE6-8. Проблема заключается в том, что onmousedown, кажется, не размывается как ожидалось:
var links = document.getElementsByTagName('a');
for (var i=0; i < links.length; i++) {
links[i].onmousedown = function () {
this.blur();
return false;
}
links[i].onclick = function() {
this.blur();
}
}
Один компромисс был бы то, если у кого-либо есть решение, которое может обработать случай в IE, где пользовательские мыши вниз, мыши от привязки, затем мыши, и не оставляют схемы, был бы шаг в правильном направлении.Спасибо.
Править: Пятница, 5-го марта 2010 Мои самые глубокие извинения за то, что заняли много времени для возвращения к этому но мне было нужно решение, которое работало в как можно большем количестве браузеров. Ну, оказывается, что никакие тайм-ауты не необходимы только некоторая схема, класс и управление фокусом. Следующее решение работает в IE6 +, FF2 +, Safari 3 +, и Chrome. Я не протестировал в Opera, но любил бы, если кто-то мог бы подтвердить/отклонить, что он работает. То, что следует, является большим количеством suedo-кода, чем чистый js. Я оставляю его как осуществление для читателя для реализации в любимой платформе:
var anchorEventIsMouse = true;
$('a').mousedown(function() {
anchorEventIsMouse = true;
this.hideFocus = true; /* IE6-7 */
this.style.outlineStyle = 'none'; /* FF2+, IE8 */
this.addClass('NoOutline'); /* see click func */
this.setFocus(); /* Safari 3+ */
});
$('a').keydown(function() {
anchorEventIsMouse = false;
});
$('a').blur(function() {
this.style.outlineStyle = '';
this.hideFocus = false;
this.removeClass('NoOutline');
});
$('a').click(function(e) {
/* Adding class NoOutline means we only allow keyboard
* clicks (enter/space) when there is an outline
*/
if (!anchorEventIsMouse && this.hasClass('NoOutline')) {
e.stopEventPropagation();
}
});
7 ответов
НЕ ИСПОЛЬЗУЙТЕ blur() !
Не нужно сбрасывать ядерный фокус с орбиты только для того, чтобы подкорректировать его внешний вид.
В IE вы можете установить hideFocus JS свойство, чтобы предотвратить рисование контура. Другие браузеры позволяют переопределить через свойство outline CSS.
Просто установите их в обработчике mousedown . Вероятно, вы можете воспользоваться пузырьком событий и сделать это с одного обработчика в теле:
event.srcElement && event.srcElement.hideFocus=true; // IE
event.target && event.target.style.outline='none'; // non-IE
и если вы хотите поддержать переключение между клавиатурой и мышью, в mousedown прикрепите blur обработчик, который восстанавливает их по умолчанию (вам понадобится outline='' и закрытие над целевым событием).
Попробуйте использовать этот CSS для своих ссылок:
<style>
a {outline: none;}
a:hover, a:active, a:focus {
// styling for any way a link is about to be used
}
</style>
Подробнее здесь:
http://css-tricks.com/removing-the-dotted- наброски /
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
Я не тестировал это, но обычно задержка сортирует вещи такого рода:
var links = document.getElementsByTagName('a');
for (var i=0; i < links.length; i++) {
links[i].onmousedown = function () {
window.setTimeout(function () { this.blur(); }, 0);
return false;
}
links[i].onclick = function() {
this.blur();
}
}
Причина этого в том, что большинство событий срабатывают на элементе до того, как он действительно получает фокус. Таймер задерживает размытие до тех пор, пока поток не станет свободным, поэтому фокус будет получен и его можно будет размыть.
Некоторые браузеры поддерживают свойство CSS outline , которое удаляет контур фокуса, если установлено значение none , IE этого не делает, но вы можете решить none-js решение для этих браузеров.
РЕДАКТИРОВАТЬ
Честно говоря, иногда я не знаю, куда идет мой мозг. Он временно исчез, но снова вернулся. Это не сработало для вас, потому что в таймере this неправильно указывает на целевой элемент. Вы можете исправить это следующим образом:
links[i].onmousedown = function () {
var self = this;
window.setTimeout(function () { self.blur(); }, 0);
return false;
}
Иногда контур может мерцать перед его удалением, поэтому я бы рекомендовал использовать свойство hideFocus , чтобы временно скрыть контур во время событий мыши:
links[i].onmousedown = function () {
var self = this;
this.hideFocus = true;
window.setTimeout(function () { self.blur(); self.hideFocus = false; }, 0);
return false;
}
Это кажется работать. Скрытие прямоугольника фокуса при загрузке страницы и включение его только при использовании клавиши TAB. Если они щелкают ссылку, прямоугольник фокуса снова отключается:
document.onkeydown = checktab;
function checktab(e) {
var tabKey=9;
var code=(e) ? e.which : window.event.keyCode;
if(code==tabKey){
showOutline(true);
}
}
function showOutline(show){
var links = document.getElementsByTagName('a');
for (var i=0; i < links.length; i++) {
links[i].style.outline=(show) ? '' : 'none';
links[i].onmousedown = function () {showOutline(false);};
links[i].hideFocus=!show;
}
}
showOutline(false);
$("a").click(function() {
$(this).blur();
});
$("a").mousedown(function() {
$(this).blur();
});
Попробуйте это ;)
Здесь есть предложение по jQuery: Как убрать точечные контуры фокуса якорной ссылки только для событий мыши, но не для навигации по вкладкам клавиатуры?
Понятия не имею, поможет ли это, но поскольку все остальное не работает, попробуйте установить стиль на основе событий, а не пытаться инициировать событие. Если это наведение указателя мыши (следовательно, щелчок), оставьте подчеркивание, если это фокус без наведения указателя мыши (использование клавиатуры), тогда оставьте поведение подчеркивания там.
Это еще один длинный шанс, но, возможно, стоит попробовать.