Question

我遇到以下恼人的问题：在我网站的空白处多次点击时，会选择整个行和段落as demonstrated by this fiddle。

但由于光标下没有文字（例如空的绿色区域），我甚至不明白为什么它首先要选择任何东西。

简单地说：如果我点击文字，我想要默认选择行为，但如果我不点击文字，它不应该选择任何东西。这可能吗？

参考HTML代码：

<div>
    <span>Clicks:</span> <input id="clicks" value="0"></input>

    <div style="background-color:LightGreen"
        onclick="$('#clicks').val(parseInt($('#clicks').val()) + 1);"><span class="hard">CLICK THE GREEN AND CLICK IT HARD!</span>
    <br/>
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS5lQfEXNPKzMGZRHUQJJJj97NFoi1Q4iZ_dT1GK9lrYsjrgd7i5XWsrTA"></img>
       <div style="width: 100%; display:inline-block"><span>more text</span></div>
    </div>
    <span>even more text</span>

    <p id="log"></p>
</div>

Answer 1

我们可以使用CSS' user-select解决此问题。

Try out the solution in this fiddle

我们首先禁用整体文本选择，如下所示：

/**
 * Disallow selection for the entire site.
 */
body {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */ 
}

然后，我们会仔细查看all HTML elements和white-list所有纯文本元素的集合，如下所示：

/**
 * White-list all of HTML5's "pure text" elements.
 * @see http://www.w3schools.com/tags/
 */
 a, abbr, address, b, bdi, bdo, blockquote, br, button, caption, center, 
 cite, code, col, dd, del, dfn, dt, em, figcaption, footer, h1, h2, h3, h4, 
 h5, h6, i,  input, ins, kbd, label, legend, mark, output, p, pre, q, rp, rt, 
 ruby, s,  samp, small, span, strike, strong, sub, summary, sup, td, textarea, 
 th, time,  title, tt, u, var {
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
 }

这样，用户仍然可以选择文本，但不会意外选择空格。如果您发现任何不可选的文本，只需将其包装在<span>。

中

（意外）单击空白区域时禁用选择（使用CSS）

1 个答案: