Mobile Geräte sie sind ein integraler Bestandteil unseres Lebens geworden. Die Verwendung von Smartphones und Tablets ist für die meisten Menschen zur täglichen Routine geworden. Es gibt jedoch manchmal Situationen, in denen Sie einen Klick auf einem mobilen Gerät deaktivieren müssen. Vielleicht besitzen Sie ein Unternehmen und möchten verhindern, dass versehentlich auf wichtige Elemente einer Website geklickt wird, oder Sie möchten einfach eine interaktive Anwendung entwickeln, ohne einen Klick zu verwenden. In diesem Artikel werden wir uns einige Möglichkeiten ansehen, wie Sie einen Klick auf einem mobilen Gerät deaktivieren können.
Der erste Weg ist die Verwendung von CSS. Sie können einen Stil anwenden pointer-events: none; zu den Elementen, auf die Sie klicken möchten. Diese Eigenschaft deaktiviert das Klicken und andere Mausereignisse, wie z. B. das Bewegen des Mauszeigers und das Ziehen. Diese Eigenschaft funktioniert jedoch nicht in allen Browsern, insbesondere in älteren Versionen von Internet Explorer.
Der zweite Weg ist die Verwendung von JavaScript. Mit JavaScript können Sie einen Click-Ereignishandler hinzufügen und dessen Aktion rückgängig machen. Sie können beispielsweise den folgenden Code hinzufügen:
document.getElementById("myElement").addEventListener("click", function(event) );In diesem Code finden wir ein Element mit der ID "myElement" und fügen einen Click-Ereignishandler hinzu. Die Handlerfunktion ruft einfach die Methode auf preventDefault() um die Klick-Aktion abzubrechen. Diese Methode funktioniert in allen Browsern, erfordert jedoch eine gewisse Vertrautheit mit JavaScript.
Unabhängig von der gewählten Methode kann das Deaktivieren des Klicks auf einem mobilen Gerät für verschiedene Szenarien nützlich sein, z. B. zum Schutz von Daten, zur Verbesserung der Leistung und zur Vermeidung versehentlicher Klicks. Wählen Sie die für Sie geeignete Methode aus und passen Sie Ihr mobiles Gerät an Ihre Bedürfnisse an.
Methoden zum Deaktivieren des Klicks auf mobilen Geräten
1. Verwenden der CSS-Eigenschaft pointer-events
Mit der pointer-events-Eigenschaft können Sie steuern, wie Mausereignisse auf ein Element wirken. Sie können die folgende CSS-Regel anwenden, um den Klick auf mobilen Geräten zu deaktivieren:
2. Programmgesteuertes Deaktivieren eines Klickereignisses mit JavaScript
Mit JavaScript können Sie das Klickereignis auf mobilen Geräten deaktivieren. Wählen Sie dazu ein Element aus und fügen Sie einen Handler hinzu, der verhindert, dass die Standardaktion ausgeführt wird:
3. Verwenden des Attributs disabled
Das disabled-Attribut kann auf Formularelemente wie Schaltflächen oder Links angewendet werden, um zu verhindern, dass sie aktiviert werden. Durch Hinzufügen des Attributs disabled können Sie den Klick auf mobilen Geräten deaktivieren:
4. Umhüllen von Elementen mit einem äußeren Element
Umhüllen eines Elements durch ein externes Element und Anwenden der Eigenschaft pointer-events: none CSS; mit diesem externen Element können Sie auch das Klicken auf mobilen Geräten deaktivieren:
Verwenden der CSS-Eigenschaft "pointer-events: none"
Sie können die CSS-Eigenschaft "pointer-events: none" verwenden, um den Klick auf einem mobilen Gerät zu deaktivieren. Mit dieser Eigenschaft können Sie die Interaktion mit einem Element deaktivieren, indem Sie den Mauszeiger bewegen oder auf dem Gerätebildschirm tippen.
Wenn Sie die Eigenschaft "pointer-events: none" auf ein Element anwenden, können Sie jegliche Interaktion mit dem Element blockieren, einschließlich Klicks, Schweben, Scrollen und anderen Zeigerereignissen.
Beispiel für die Verwendung der CSS-Eigenschaft "pointer-events: none" zum Deaktivieren des Klicks auf einem mobilen Gerät:
| HTML | CSS |
|---|---|
Ein Element | #element |
In diesem Beispiel wird dem angegebenen Element mit der ID "element" die Interaktion durch Klicken oder Tippen auf einem mobilen Gerät untersagt.
Die Verwendung der CSS-Eigenschaft "pointer-events: none" ist nützlich, wenn Sie den Klick auf bestimmte Elemente auf mobilen Geräten deaktivieren möchten, z. B. um zu verhindern, dass beim Scrollen eine Seite versehentlich auf Links oder Schaltflächen geklickt wird.
Sperren des Touchstart-Ereignisses über JavaScript
Sie können JavaScript verwenden, um das Touchstart-Ereignis auf einem mobilen Gerät zu blockieren. Dies kann nützlich sein, wenn Sie verhindern möchten, dass ein Element versehentlich berührt wird, wenn Sie den Bildschirm berühren.
Um zu beginnen, fügen Sie dem Element, auf dem Sie das Touchstart-Ereignis blockieren möchten, eine ID hinzu. Wenn Sie beispielsweise eine Schaltfläche mit der ID "my-button" haben, können Sie dies wie folgt tun:
Dann können Sie in JavaScript die Methode verwenden addEventListener um diesem Element einen Ereignishandler hinzuzufügen.
document.getElementById("my-button").addEventListener("touchstart", function(event) , false);Im obigen Code verwenden wir preventDefault(), um die Standardaktion beim Touchstart-Ereignis zu verhindern. Dies bedeutet, dass beim Berühren des Bildschirms nichts passiert und das Ereignis blockiert wird.
Wenn der Benutzer nun auf das Element mit der ID "my-button" auf dem mobilen Gerät klickt, passiert nichts. Das Touchstart-Ereignis ist vollständig gesperrt und verhindert versehentliches Drücken.
Neben dem Sperren des "Touchstart" -Ereignisses können Sie auch denselben Ansatz verwenden, um andere Ereignisse auf mobilen Geräten wie "touchmove" oder "touchend" zu blockieren. Ersetzen Sie einfach "touchstart" durch das entsprechende Ereignis, wenn Sie einen Ereignishandler hinzufügen.
Das Sperren des "Touchstart" -Ereignisses über JavaScript verhindert somit versehentliches Tippen auf mobilen Geräten und schützt Sie vor fehlerhaften Benutzeraktionen, wenn Sie den Bildschirm berühren.
