CSS可以通過一些簡單的代碼來控制頁面元素的交互效果,例如雙擊時防止文字被選中。
body { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ }
以上CSS代碼可以應用于整個頁面的body元素,使用不同的前綴可以兼容不同的瀏覽器,而"user-select: none"則是標準的寫法。
如果只想防止單個元素內的文字被選中,可以針對該元素添加CSS代碼:
.element { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ }
在雙擊時,文字被選中可能會干擾用戶的瀏覽體驗,如閱讀文章時不小心選中了一部分文字改變了突出重點的閱讀體驗,因此使用CSS代碼防止文字被選中是一個好的解決方案。