Mobile Geräte sind zu einem festen Bestandteil unseres Lebens geworden. Wir verwenden sie für Kommunikation, Arbeit, Unterhaltung und andere Zwecke. Aus diesem Grund sind verschiedene Einstellungen und Funktionen erforderlich, um die Arbeit mit Ihrem mobilen Gerät bequemer und effizienter zu gestalten.
Eine dieser Einstellungen ist die Möglichkeit, den Klick auf dem mobilen Gerät zu deaktivieren. Dies kann beispielsweise nützlich sein, wenn Sie verhindern möchten, dass Sie versehentlich auf Elemente der Benutzeroberfläche tippen oder das Gerät nur mit Gesten steuern möchten.
Um einen Klick auf einem mobilen Gerät zu deaktivieren, müssen Sie einige einfache Schritte befolgen. Öffnen Sie zuerst die Einstellungen Ihres Geräts und suchen Sie nach dem Abschnitt "Zugänglichkeit" oder "Bildschirm". In diesem Abschnitt finden Sie den Schalter oder die Option "Klick deaktivieren". Setzen Sie ein Häkchen oder schalten Sie diese Option auf "Ein".
Jetzt haben Sie keinen Klick mehr auf Ihrem mobilen Gerät. Sie können andere Methoden zur Interaktion mit dem Gerät verwenden, z. B. Gesten, Streichen oder Drücken von Steuertasten. Dies kann besonders nützlich sein, wenn Sie mit Anwendungen oder Spielen arbeiten, bei denen versehentliches Tippen auf den Bildschirm unerwünschte Aktionen auslösen kann. Auch das Deaktivieren des Klicks kann für Menschen mit Behinderungen oder für diejenigen nützlich sein, die es vorziehen, das Gerät ohne Fingereingabe zu verwenden.
Möglichkeiten zum Deaktivieren des Klicks auf mobilen Geräten
1. Verwenden der CSS-Eigenschaft pointer-events
Die Eigenschaft pointer-events kann verwendet werden, um die Möglichkeit zu deaktivieren, auf ein Element und dessen Nachkommen zu klicken. Dazu müssen Sie den CSS-Stilen die folgende Regel hinzufügen:
.my-element
2. Verwenden von JavaScript für das Touchstart-Ereignis
Sie können JavaScript verwenden, um die Standardaktion rückgängig zu machen, wenn Sie auf mobilen Geräten auf ein Element tippen. Zum Beispiel:
document.getElementById('my-element').addEventListener('touchstart', function(e) );
Beachten Sie, dass in diesem Beispiel nur das Touchstart-Ereignis berücksichtigt wird und je nach Anwendungsfall andere Ereignisse wie touchmove und touchend berücksichtigt werden müssen.
3. Verwenden des Tabindex-Attributs="-1"
Wenn Sie einem Element das Attribut tabindex="-1" hinzufügen, können Sie den Fokus auf das Element durch Klicken deaktivieren. Ein Beispiel:
Dies gilt auch für andere Elemente wie Links, Bilder usw.
4. Verwenden des Attributs disabled
Das disabled-Attribut kann verwendet werden, um die Interaktivität eines Elements auf mobilen Geräten zu deaktivieren. Ein Beispiel:
Beachten Sie, dass das Element bei Verwendung dieses Attributs sowohl auf dem Computer als auch auf mobilen Geräten deaktiviert wird.
5. Verwenden von CSS-Medienabfragen
Abhängig von der Bildschirmauflösung können Sie verschiedene Stile anwenden, die die Anklickbarkeit von Elementen auf mobilen Geräten deaktivieren. Ein Beispiel:
@media only screen and (max-width: 600px) >
Beachten Sie, dass diese Technik die Verwendung von CSS-Medienabfragen erfordert und möglicherweise zusätzliche Anpassungen erfordert, um vollständig anpassungsfähig zu sein.
Verwenden der CSS-Eigenschaft pointer-events
Webentwickler haben oft die Notwendigkeit, einen Klick auf einem mobilen Gerät zu deaktivieren. Dies kann beispielsweise erforderlich sein, um zu verhindern, dass beim Scrollen eine Seite versehentlich auf ein Element geklickt wird.
Sie können die CSS-Eigenschaft pointer-events verwenden, um dieses Problem zu beheben. Damit können Sie steuern, wie ein Element auf Zeigerereignisse reagiert, einschließlich eines Klicks. Die Eigenschaft akzeptiert mehrere Werte:
- auto : das Element reagiert standardmäßig auf Zeigerereignisse;
- none : Das Element reagiert nicht auf Zeigerereignisse, einschließlich Klick;
- visiblePainted : Das Element reagiert auf Zeigerereignisse, geht jedoch nicht durch die darüber gezeichneten Elemente. Wenn beispielsweise eine transparente Ebene auf einem Element vorhanden ist, wird ein Klick auf die darunter liegende Ebene ausgeführt;
- visibleFill : Das Element reagiert auf Zeigerereignisse, geht jedoch nicht durch nicht transparente Bereiche des Elements;
- visibleStroke : Das Element reagiert auf Zeigerereignisse, geht jedoch nicht durch nicht transparente Bereiche der Elementgrenzen.
Sie können den Wert none für die Eigenschaft "pointer-events" verwenden, um einen Klick auf einem mobilen Gerät zu deaktivieren:
/* CSS */.element
Wenn Sie nun auf ein Element klicken, wird keine Aktion ausgelöst. Dies kann in verschiedenen Szenarien nützlich sein, wenn Sie das Klicken auf ein bestimmtes Element oder eine Gruppe von Elementen deaktivieren möchten.
Beachten Sie jedoch, dass sich die pointer-events-Eigenschaft auf andere Zeigerereignisse auswirken kann, z. B. Schweben oder Ziehen. Daher sollten Sie vor der Verwendung dieser Eigenschaft sorgfältig über ihre Verwendung im konkreten Fall nachdenken.
Schließen Sie die JavaScript-Bibliothek an, um den Klick zu deaktivieren
Sie können die JavaScript-Bibliothek "FastClick" verwenden, um den Klick auf einem mobilen Gerät zu deaktivieren. Diese Bibliothek hilft Ihnen, Verzögerungen bei der Verarbeitung von Klicks auf mobilen Geräten zu vermeiden und die Handhabung von Klicks zu vereinfachen.
Um die "FastClick" -Bibliothek mit Ihrem Projekt zu verbinden, können Sie den folgenden Code verwenden:
- Laden Sie die Datei "fastclick" herunter.js" von der offiziellen Website "FastClick".
- Erstellen Sie einen Ordner "js" im Stammverzeichnis Ihres Projekts, falls er noch nicht erstellt wurde.
- Verschieben Sie die heruntergeladene Datei "fastclick".js" in den erstellten Ordner "js".
- Fügen Sie den folgenden Code vor dem schließenden Tag in Ihrer HTML-Datei ein: