Javascript-Auswahl deaktivieren

Bei der Webentwicklung müssen wir Benutzern manchmal die Auswahl bestimmter Elemente auf einer Webseite verbieten, um sicherzustellen, dass sie keinen Risiken wie illegalem Kopieren ausgesetzt sind. Zu diesem Zeitpunkt zeigt eine sehr praktische Funktion von Javascript – die Deaktivierung der Auswahl – ihre Vorteile.

Auswahl deaktivieren bedeutet, dass der Browser nach der Auswahl eines Elements auf der Webseite den Text und andere Inhalte dieses Elements nicht in die Zwischenablage kopiert. Javascript kann diese Funktion sehr einfach implementieren. Die

-Methode lautet wie folgt:

// 防止选中文本
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);

Die Funktion dieser Funktion besteht darin, die Auswahl der übergebenen Elementvariablen zu deaktivieren. Wenn für das Element das Attribut „onselectstart“ festgelegt ist, legen Sie es auf „false“ fest, um zu verhindern, dass das standardmäßig ausgewählte Ereignis ausgelöst wird. Wenn die Eigenschaft nicht vorhanden ist, ermitteln Sie weiterhin, ob sie über die Eigenschaft MozUserSelect verfügt. Wenn dieses Attribut ebenfalls nicht vorhanden ist, wird onmousedown des Elements auf false gesetzt.

Wenn Sie verhindern möchten, dass bestimmte Elemente ausgewählt werden, können Sie dem Element eine sorgfältig auswählbare Klasse hinzufügen und das MozUserSelect-Attribut der Klasse überschreiben.

Das Codebeispiel lautet wie folgt:

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

Im obigen Code ist das Attribut für die spezifische Klasse auf !important gesetzt, um sicherzustellen, dass das Element unabhängig von der Einstellung nicht ausgewählt wird. Durch Festlegen des Attributs „Benutzerauswahl“ können Sie auch andere Funktionen implementieren, z. B. dass Text auswählbar ist, das Kopieren mit der rechten Maustaste jedoch verboten ist.

Sie können nicht nur die Auswahl deaktivieren, Javascript kann auch das Kopieren und Durchschneiden von Ereignishandlern deaktivieren.

Der Code lautet wie folgt:

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

Im obigen Code übergeben wir zunächst einen Elementparameter und fügen dann Listener für die Kopier- und Ausschneideereignisse des Elements hinzu. In beiden Fällen verwenden wir die Methode „preventDefault()“, um zu verhindern, dass das Standardverhalten ausgelöst wird, und verhindern so das Kopieren und Ausschneiden.

Kurz gesagt ist das Deaktivieren von Vorgängen wie Auswahl, Kopieren und Ausschneiden in Javascript sehr einfach. Sie müssen nur einige Eigenschaften oder Ereignishandler für bestimmte Elemente festlegen. Wenn bei der Entwicklung von Webseiten vertrauliche Informationen wie Urheberrecht und Datenschutz betroffen sind, sind Vorgänge wie das Deaktivieren der Auswahl unerlässlich.

Das obige ist der detaillierte Inhalt vonJavascript-Auswahl deaktivieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!