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

我有以下恼人的问题：在我的网站的空白处多次点击时，它会选择整个行和段落，as demonstrated by this fiddle。禁用选择（意外）点击空白区域时（使用CSS）

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

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

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

来源

2014-11-25 Domi

急切地等待'：accident' CSS选择器.. – George 2014-11-25 12:03:25

我们可以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>中。

来源

2014-11-25 12:00:21 Domi

你刚才问了一个问题，你刚刚回答了吗？为什么？ – 2014-11-25 12:01:10

@ VangelTzo让我来推荐你[官方SO博客]（http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/）：“要清楚地说明，提出并回答你自己的问题不仅仅是可以的，它是明确的鼓励。“ - 就我而言，我在几个月前与朋友交谈时听说过这个问题，而今天我也遇到了这个问题，并且我能够解决这个问题。我的朋友认为，这是一个很好的解决方案。我猜测，许多其他人也有类似的问题... – Domi 2014-11-25 12:02:22

我不知道这一点，你可以自由发布它，因为它是有效的SO规则;） – 2014-11-25 12:06:56

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

回答

相关问题