(意外)单击空白区域时禁用选择(使用CSS)

Question

我有以下恼人的问题:当我在网站上的空白处多次点击时,它会选择整个行和段落,如此小提琴所示.

但由于光标下没有文字(例如空的绿色区域),我甚至不理解为什么它首先要选择任何东西.

简单地说:如果我点击文本,我想要默认选择行为,但如果我不点击文本,它不应该选择任何东西.那可能吗？

参考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

我们可以用CSSuser-select来解决这个问题.

试试这个小提琴的解决方案.

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

/**
 * 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+ */ 
}

然后,我们仔细查看所有HTML元素的集合,并列出所有纯文本元素的白名单,如下所示:

/**
 * 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>.