該如何避免使用者透過滑鼠選取特定元素？

發表於 2024-05-05 分類於 CSS

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

有些時候，我們網站上可能有某些區塊會不想要讓使用者可以選取，那麼這一篇就來記錄一下有哪些方式可以避免使用者選取特定元素。

前言

有些時候，我們網站上可能有某些區塊會不想要讓使用者可以選取，那麼這一篇就來記錄一下有哪些方式可以避免使用者選取特定元素。

假設今天我們的情境是，我們會有一段文字，但是我們不希望使用者可以透過滑鼠選取這段文字，那麼有哪些方式可以達到這個目的呢？

1	<p>這是一段文字，「這一段文字我不想要被使用選取」，其餘的部分可以</p>

所以接下來就來聊一下有哪些方式可以達到這個目的吧！

JavaScript 中有很多種方式，可以達到避免使用者選取特定元素的目的

第一個方式是使用 onselectstart 事件，當使用者開始選取文字時，會觸發 selectstart 事件，我們可以透過 return false 來達到避免使用者選取的目的

1	<p>這是一段文字，<span onselectstart="return false;">「這一段文字我不想要被使用選取」</span>，其餘的部分可以</p>

當你補上這一段之後，你會發現使用者無法將這一段文字選取起來

但很好笑，其實就只是那一段文字無法被選取，其餘的部分還是可以被選取的，所以說你只要先選取最前面的文字，再選取這一段文字，就可以選取到這一段文字了，甚至 CTRL + A 也可以選取到這一段文字。

onselectstart 語法也可以直接掛在特定元素上，這樣就可以達到避免使用者選取特定元素的目的

1	<p>這是一段文字，<span id="no-select">「這一段文字我不想要被使用選取」</span>，其餘的部分可以</p>

1
2
3

document.getElementById('no-select').addEventListener('selectstart', function (e) {
  e.preventDefault();
});

當然，selectstart 也可以綁到 body 上，這樣就可以達到避免使用者選取整個網頁的目的

1
2
3

document.body.addEventListener('selectstart', function (e) {
  e.preventDefault();
});

CSS 也有一些方式可以達到避免使用者選取特定元素的目的，主要使用的語法是 user-select，只要將該屬性設定為 none 就可以達到避免使用者選取的目的

1
2
3

.user-select-none {
  user-select: none;
}

1	<p>這是一段文字，<span class="user-select-none">「這一段文字我不想要被使用選取」</span>，其餘的部分可以</p>

如果我們可以選擇使用 CSS 的話，通常會盡可能選擇 CSS 來實作，考慮到專案的維護性，CSS 通常會比較好維護。

除此之外，CSS 的 user-select: none; 還有一個很厲害的地方，你可以嘗試去選取這一段文字，你會發現這一段文字無法被選取，但是你可以選取到其他的文字，這樣就可以達到避免使用者選取特定元素的目的，

甚至 CTRL + A + V 也無法將這一段文字複製下來，這樣就可以達到避免使用者複製特定元素的目的。