请勿使用`blur()`！

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

只需在mousedown处理程序中设置它们即可。您可以利用事件冒泡并从正文上的单个处理程序执行此操作：

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

如果你想支持在键盘和鼠标之间切换，可以在mousedown attach 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不会，但您可以为这些浏览器设计一个非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; }

Answer 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/

Answer 4

这里有一个jQuery建议： How to remove anchor link's dotted focus outlines only for mouse events but not for keyboard tabbed navigation?

Answer 5

我不知道这是否会有所帮助，但没有别的办法可以尝试根据事件设置样式而不是尝试触发事件。如果它是鼠标悬停（因此点击）保持下划线，如果它是没有鼠标悬停（键盘使用）的焦点，那么在那里留下下划线行为。

这是另一个长镜头，但它可能值得一试。

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

Answer 7

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

试试这个;）

如何在IE中删除焦点onmousedown？

7 个答案:

请勿使用`blur()`！

如何在IE中删除焦点onmousedown？

7 个答案:

请勿使用blur()！

请勿使用`blur()`！