Как удалить фокус 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();
    }
  });

Ответ 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 attach blur, который восстанавливает их по умолчанию (вам понадобится outline='' и закрытие по событию).

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

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

Ответ 3

Попробуйте этот 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-outline/

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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