禁用選擇（意外）點擊空白區域時（使用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）

回答

相關問題