Question

在我的表格中，当我双击空白区域时，它被选中（以蓝色突出显示），我该如何避免这种情况。但我仍然需要选择行上的文字。

我试过这样，但没有用：

table{
    width:100%;
}

td{
    border:1px solid gray;
    -webkit-user-select  : text; //still empty space selected.
}

任何人都可以提出一些建议吗？（在演示中点击td上的空白区域）

Live Demo

Answer 1

这是一种方法......

DEMO：http://jsfiddle.net/PEdq5/2/

添加一些标记（文本/单元格内容周围的内联元素）

更新了HTML

<table>
    <tbody>
        <tr>
            <td><span class="denali-tooltip tooltip-on-truncate project-name">Mahindra</span>
            </td>
            <td><span>1</span>
            </td>
            <td><span>19</span>
            </td>
        </tr>
    </tbody>
</table>

然后使用影响默认选择行为的::selection伪元素规则添加一些CSS。

附加CSS

td::selection {
    background-color: transparent;
}
td > span::selection {
    background-color: blue;
    color: white;
}

有关::selection的其他信息。请注意，这是一个非标准功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection http://caniuse.com/#search=%3A%3Aselection

Answer 2

将display:block;添加到span元素。双击不再选择文本，只需三击即可。

Answer 3

替代JS方法

document.onselectstart = function() {return false;}
document.onmousedown = function() {return false;}

这将禁用鼠标在页面上选择任何内容。它在任何方面都不具备防弹功能，很容易导致您在JS中使用的其他点击功能的互操作性出现许多其他缺点。

我不宽恕这种代码，但它应该充分回答这个问题。

双击空白区域，如何防止它被选中？

3 个答案:

更新了HTML

附加CSS

替代JS方法