火狐浏览器出现奇怪的蓝色边框

Question

请看这段代码：

http://www.jsfiddle.net/tt13/5CxPr/21

在Firefox浏览器中，当您通过按ctrl键选择多行时，它会显示奇怪的蓝色边框，但在Chrome浏览器中则没有。 使用最新的Firefox 10.0.2。

这是浏览器相关的错误吗？

- Tural Ali

---

这不是一个功能吗？Firefox 用蓝色边框突出显示选定的元素。 - Alex

可能是你看到的轮廓线，尝试将其移除。 - adeneo

@Alex 不知道。无论如何，如果这是一个我想禁用的功能。问题是，怎么办？ - Tural Ali

@adeneo 不是这样的。尝试将outline:0添加到“.selected”选择器中，但没有任何变化。 - Tural Ali

很难说。我无法测试你的fiddle，因为它在Mac上无法工作。我认为ctrlKey事件没有被触发。 - Alex

我没有测试过，但取消CTRL键的事件冒泡会有帮助吗？ - Teemu

Answer 1

这是由于文本被选中导致的 - 这是浏览器的本机行为。

使用 SHIFT 键而不是 CTRL，您也可以在 Chrome 中观察到相同的问题。

要解决此问题，您可以在用户单击单元格进行选择后立即清除所选内容：

$(".subject").live('click',function(event) {
    if(event.ctrlKey) {
          $(this).toggleClass('selected');  
    } else {
          $(".subject").removeClass("selected");
          $(this).addClass("selected");           
    }
    if (document.selection)
        document.selection.empty();
    else if (window.getSelection)
        window.getSelection().removeAllRanges();
});

更新后的示例。

- Shadow Wizard Chasing Stars

Answer 2

尝试将CSS属性-moz-user-select设置到表格中以禁用默认的选择行为：

table { -moz-user-select: none; }

MDN

- Didier Ghys

---

这样做的负面影响是完全禁止选择表格文本，而不仅仅是在按下Ctrl键点击表格单元时移除边框。 - Marat Tanalin

@trl13的解决方案是清除选择，而不是阻止它 - 请参见我的答案。 - Shadow The Spring Wizard

@trl13 我认为根本不需要与这种原生浏览器功能进行斗争。用户有权利使用他的浏览器的功能。阻止此类功能通常对用户体验有害。 - Marat Tanalin

Answer 3

如果你愿意在单元格内添加额外的元素以允许文本仍然可选，则此方法适用于当前版本20.0.1的Firefox。

td { -moz-user-select: -moz-none }
td * { -moz-user-select: text }

http://jsfiddle.net/nukj7/

- Dale

---

你如何处理多行？我有一个有许多行的表格。使用您的解决方案，我只能选择一行中的一个 td。您能提供解决方案吗？提前致谢。 - webprogrammer