如何在IE中删除焦点onmousedown？

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中的情况,用户将鼠标放下,鼠标离开锚点,然后鼠标移动,并且不留下任何轮廓将是朝着正确方向迈出的一步.谢谢.

编辑:2010年3月5日,星期五我最深切的抱歉花了这么长时间才回到这一点,但我需要一个在尽可能多的浏览器中工作的解决方案.好吧,事实证明,只需要一些大纲,课程和焦点管理,不需要超时.以下解决方案适用于IE6 +,FF2 +,Safari 3+和Chrome.我没有在Opera中测试,但是如果有人能够确认/否认它有效,我会很高兴.接下来是比纯js更多的suedo-code.我把它作为练习让读者在你最喜欢的框架中实现:

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 属性来防止绘制轮廓。其他浏览器允许通过outlineCSS 属性进行覆盖。

只需将它们设置在mousedown处理程序中即可。您可能可以利用事件冒泡并通过主体上的单个处理程序来执行此操作：

event.srcElement && event.srcElement.hideFocus=true; // IE
event.target && event.target.style.outline='none'; // non-IE

如果您想支持键盘和鼠标之间的切换，请在mousedown附加blur处理程序中将其恢复为默认值（您需要outline=''关闭事件目标）。