JavaScript deaktiviert Touch

JavaScript No Touching

Mit der Beliebtheit mobiler Geräte konzentrieren sich immer mehr Websites und Anwendungen auf das mobile Erlebnis. In diesem Fall wird häufig die Touchscreen-Technologie verwendet. In einigen Fällen müssen wir jedoch die Touch-Funktion deaktivieren, um das ordnungsgemäße Funktionieren der Website oder Anwendung sicherzustellen. In diesem Artikel wird erläutert, wie Sie die Berührung mithilfe von JavaScript deaktivieren.

Was ist Berührung?

Auf mobilen Geräten berühren wir zum Bedienen normalerweise den Bildschirm mit den Fingern, was als Touch bezeichnet wird. Berührungen gibt es in vielen Formen, darunter Tippen mit einem Finger, Wischen, Kneifen und mehr. In der Webentwicklung können wir CSS und JavaScript verwenden, um Berührungsereignisse zu verarbeiten.

Warum Touch deaktivieren?

In einigen Fällen müssen wir Touch deaktivieren, um die ordnungsgemäße Funktion der Website oder Anwendung sicherzustellen. Hier sind einige häufige Szenarien:

1. Element-Interaktionskonflikt

Wenn es mehrere interagierbare Elemente auf einer Seite gibt (z. B. Schaltflächen, Links, Galerien usw.), kann es zu Konflikten zwischen ihnen kommen. Beispielsweise könnte ein Benutzer versehentlich eine Schaltfläche drücken, anstatt auf einen anderen Link zu klicken. In diesem Fall müssen wir die Berührung deaktivieren, um diese Situation zu vermeiden.

2. Fehlbedienungen vermeiden

Benutzer berühren möglicherweise versehentlich einige sensible Bereiche, wie z. B. die Löschtaste, die Einstellungstaste usw. Um diese Fehlbedienung zu vermeiden, müssen wir die Berührung deaktivieren.

3. Leistung verbessern

In manchen Fällen kann die Deaktivierung der Touch-Funktion die Leistung verbessern. Wenn wir beispielsweise eine sehr große Galerie oder Tabelle haben, kann das Wischen dazu führen, dass die Seite stottert oder abstürzt. In diesem Fall kann die Deaktivierung der Touch-Funktion dazu beitragen, dass die Seite reaktionsfähiger wird.

Wie deaktiviere ich die Berührung?

In JavaScript können wir Berührungen deaktivieren, indem wir:

1. Mit CSS

Wir können Berührungen mit der Touch-Action-Eigenschaft von CSS deaktivieren. Dieses Attribut hat die folgenden Optionen:

• auto: Der Browser kann Berührungsereignisse frei verarbeiten.
• keine: Der Browser verarbeitet keine Berührungsereignisse.
• pan-x: Horizontale Bewegung zulassen.
• pan-y: Vertikale Bewegung zulassen.
• Manipulation: Unterstützung für Zoomen und Schwenken mit Zwei-Finger-Berührung.

Der folgende Code kann Berührungsereignisse für die gesamte Seite deaktivieren:

body {
    touch-action: none;
}

Wenn Sie Berührungsereignisse nur für ein bestimmtes Element deaktivieren möchten, können Sie dies folgendermaßen tun:

.el {
    touch-action: none;
}

2. Verwenden Sie JavaScript

Bei Bedarf Für mehr Kontrolle können wir JavaScript verwenden, um die Berührung zu deaktivieren. Der folgende Code kann Touch-Ereignisse für die gesamte Seite deaktivieren:

document.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Wenn Sie Touch-Ereignisse nur für ein bestimmtes Element deaktivieren möchten, können Sie das wie folgt tun:

var el = document.getElementById('el');
el.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Im obigen Code verwenden wir präventDefault() Methode zum Verhindern von Berührungsereignissen Das Standardverhalten besteht darin, Berührungen zu deaktivieren.

Beachten Sie, dass wir { passive: false } als Option an den Ereignis-Listener übergeben, um sicherzustellen, dass die Methode „preventDefault()“ wirksam wird. Wenn diese Option nicht festgelegt ist, funktioniert die Methode „preventDefault()“ möglicherweise nicht und verhindert so, dass Touch deaktiviert wird.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie die Touchfunktion mithilfe von JavaScript deaktivieren. Je nach Bedarf können wir die Berührung mithilfe von CSS oder JavaScript deaktivieren. In jedem Fall sollte jedes Szenario, in dem die Berührung deaktiviert wird, sorgfältig abgewogen werden, um sicherzustellen, dass die Website oder Anwendung ordnungsgemäß funktioniert.

Das obige ist der detaillierte Inhalt vonJavaScript deaktiviert Touch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!