javascript 禁止選中

在 Web 開發中，有時我們需要禁止使用者選取網頁中的某些元素，以確保其不受非法複製等風險。此時，Javascript 的一個非常實用的特性－禁止選取就顯示出了它的優點。

禁止選中，指的是網頁中選取某個元素後，瀏覽器不會把這個元素的文字等內容複製到剪貼簿上。 Javascript 可以將這個功能實作得非常簡單。

方法如下所示：

// 防止选中文本
function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}
// 调用示例
disableSelection(document.body);

此函數的作用，是將傳入的元素變數進行禁止選取的處理。如果該元素已經設定了 onselectstart 屬性，則將其設為 false，以防止預設選取事件的觸發。如果該屬性不存在，則繼續判斷是否具有 MozUserSelect 屬性。如果也不存在該屬性，則設定元素的 onmousedown 為 false。

如果要避免某些特定元素被選中，則可以為該元素新增 careful-selectable 類，並重寫該類別的 MozUserSelect 屬性。

程式碼範例如下所示：

.careful-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

在上述程式碼中，為特定類別的屬性設定為 !important，以保證無論元素如何設置，都不會被選取。透過設定 user-select 屬性，還可以實現文字可選中、但禁止滑鼠右鍵複製等其他功能。

不僅可以禁止選中，Javascript 還可以透過事件處理程序來禁止複製和剪下。

程式碼如下所示：

// 防止复制和剪切
function disableCopyAndCut(element) {
    element.addEventListener('copy', function(e) {
        e.preventDefault();
        console.log('禁止复制！');
    });
    element.addEventListener('cut', function(e) {
        e.preventDefault();
        console.log('禁止剪切！');
    });
}
// 调用示例
disableCopyAndCut(document.body);

在上述程式碼中，我們首先傳入了一個元素參數，然後分別為該元素的 copy 和 cut 事件新增了監聽器。在這兩種情況中，我們使用 preventDefault() 方法來防止預設行為的觸發，從而達到禁止複製和剪切的效果。

總之，Javascript 中禁止選取、複製和剪下等操作方法都十分簡單，只需要為特定元素設定一些屬性或事件處理程序即可實現。在開發 Web 頁面時，若涉及版權、隱私等敏感訊息，禁止選取等操作必不可少。

以上是javascript 禁止選中的詳細內容。更多資訊請關注PHP中文網其他相關文章！