Cuando agregamos un efecto de desplazamiento a un elemento en CSS, se adhiere a los dispositivos táctiles. En este artículo, aprenderemos cómo resolver este problema.
Hay dos enfoques posibles para resolver este problema:
1. Sin usar JavaScript: se puede resolver usando media query en CSS. La condición ‘hover: hover’ se refiere a los dispositivos que admiten hover. El uso de la consulta de medios junto con esta condición garantiza que el CSS a continuación se agregue solo en dichos dispositivos.
Fragmento de código:
@media(hover: hover) {
#btn:hover {
background-color: #ccf6c8;
}
}
Esto agrega un efecto de desplazamiento solo en dispositivos habilitados para desplazamiento, lo que significa que no se aplica ningún efecto de desplazamiento en dispositivos táctiles. Aquí, el color de fondo del botón se cambia al pasar el mouse.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#btn {
background-color: #0dad78;
margin: 3%;
font-size: 30px;
}
@media (hover: hover) {
#btn:hover {
/*Add hover effect to button
on hover enabled devices*/
background-color: #ccf6c8;
}
}
</style>
</head>
<body>
<button type="button" id="btn">
Submit
</button>
</body>
</html>
Salida (en pantalla no táctil):
El botón conserva su estado original en los dispositivos táctiles ya que no hay efecto de desplazamiento.
2. Usando JavaScript: en este método, usaremos JavaScript para determinar si estamos en un dispositivo táctil usando la siguiente función. El evento ontouchstart devuelve verdadero cuando el usuario toca un elemento. Navigator.maxTouchPoints devuelve el número máximo de puntos de contacto simultáneos admitidos por el dispositivo. Navigator.msMaxTouchPoints también tiene la misma función con el prefijo de proveedor «ms» para los navegadores de destino IE 10 y anteriores .
Por lo tanto, la función dada devuelve verdadero si el dispositivo está habilitado para tocar. (Para leer más sobre la función, consulte: https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/ )
function is_touch_enabled() {
return ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0);
}
Si el toque no está habilitado, agregamos una clase a nuestro botón. Esta clase agrega un efecto de desplazamiento al botón en CSS como se describe en el siguiente ejemplo:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#btn {
background-color: #0dad78;
margin: 3%;
font-size: 30px;
}
.btn2:hover {
background-color: #ccf6c8 !important;
/*Hover effect is added to btn2 class*/
}
</style>
</head>
<body onload="hover()">
<button type="button" id="btn">Submit</button>
<script>
function hover() {
function is_touch_enabled() {
// Check if touch is enabled
return "ontouchstart"
in window || navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (!is_touch_enabled()) {
// If touch is not enabled, add "btn2" class
var b = document.getElementById("btn");
b.classList.add("btn2");
}
}
</script>
</body>
</html>
Salida (en dispositivos no táctiles):
El botón conserva su estado original en los dispositivos táctiles ya que no hay efecto de desplazamiento.
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA