Как убрать фокус на mousedown в IE?

Question

Конечная цель: красивые страницы для пользователей мыши, доступные страницы для пользователей клавиатуры. Эффект, который я хочу, состоит в том, чтобы щелкнуть привязку, чтобы не создавать контуры во время и не оставлять контуры после. Кроме того, я хочу, чтобы вкладки клавиатуры перемещали фокус и, таким образом, окружали элементы контуром. Следующий код работает в 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. Я не тестировал в Опере, но был бы рад, если бы кто-то мог подтвердить / опровергнуть, что это работает. Далее следует более 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();
    }
  });

Answer 1

НЕ ИСПОЛЬЗОВАТЬ 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='' и закрытие по цели события).

Answer 2

Я не проверял это, но обычно задержка сортирует такие вещи:

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 для этих браузеров.

EDIT Честно говоря, иногда я не знаю, куда уходит мой мозг. Он временно исчез, но вернулся снова. Это не сработало для вас, потому что в таймере 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; 
} 

Answer 3

Это похоже на работу. Скрытие прямоугольника фокуса при загрузке страницы и включение его только при использовании клавиши 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);

Answer 4

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

Это еще один длинный выстрел, но, возможно, стоит попробовать.

Answer 5

$("a").click(function() {
     $(this).blur();
});
$("a").mousedown(function() {
     $(this).blur();
});

Попробуйте это;)

Answer 6

Здесь есть предложение jQuery: Как удалить точечные контуры фокуса якорной ссылки только для событий мыши, но не для навигации по вкладкам клавиатуры?

Answer 7

Попробуйте эту 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 / удаление-пунктирные контурный /

http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/