Esta publicación explicará los métodos para determinar si event.target tiene una clase en particular o no usa JavaScript.
¿Cómo verificar si event.target tiene una clase específica usando JavaScript?
Para determinar si event.target tiene una clase en particular, use los siguientes métodos predefinidos de JavaScript:
Veamos cómo funcionan estos métodos para determinar la clase en un event.target.
Método 1: compruebe si event.target tiene una clase específica usando el método contains()
Para determinar si un elemento pertenece a una clase específica, utilice el “ contiene() ” método de la “ Lista de clase ' objeto. El método contains() se usa para identificar si un elemento específico está presente en la colección. Sus salidas” verdadero ” si el elemento está presente, de lo contrario, da “ falso ”. Es la forma más eficiente de determinar la clase de un elemento.
Sintaxis
Siga la sintaxis dada a continuación para determinar si event.target tiene una clase específica o no usando el método contains():
evento. objetivo . Lista de clase . contiene ( 'nombre de la clase' )En la sintaxis anterior:
- “ event.target ” es un evento desencadenado que se verificará si contiene la clase específica o no.
- Los ' nombre de la clase ” identifica el nombre de la clase CSS que forma parte del evento desencadenado.
Valor devuelto
Vuelve ' verdadero ” si el evento desencadenado tiene la clase especificada; de lo contrario, devuelve “ falso ”.
Ejemplo
Primero, crea tres “ división ” elementos en un archivo HTML usando el HTML Dale estilo a los elementos usando estilo CSS. Para hacerlo, crea una clase CSS “ .div ” para todos los elementos div: Crear un ' .centro ” clase para establecer los elementos en el centro de la página: Ahora, para diseñar, cada div crea individualmente una clase CSS para ellos. Para el primer div, establezca el color de fondo ' rojo ' en el ' estilo div1 ' clase: Para el segundo div, establezca el color de fondo ' rábano rosa ' utilizando el ' rgba(194, 54, 77) ” código en el “ estilo div2 ' clase: Establecer el color de fondo “ rosado ” del tercer div creando el “ estilo div3 ' clase: Después de ejecutar el código HTML anterior, la salida se verá así: Ahora, en un archivo JavaScript o un “ guion ”, use el código proporcionado a continuación para verificar si event.target tiene una clase específica o no: En el fragmento de código anterior: Producción El GIF anterior muestra que div1 contiene el ' centro 'clase como se muestra' verdadero ”, mientras que div2 y div3 muestran “ falso ” en el cuadro de alerta, lo que significa que no contienen el “ centro ' clase. Otro método predefinido de JavaScript llamado “ partidos() ” se puede utilizar para comprobar si una clase específica pertenece a un elemento o un evento. Los ' nombre de la clase ” es el único parámetro necesario para determinar si un elemento o un evento de destino incluye una determinada clase o no. Sintaxis La sintaxis dada a continuación se utiliza para el método de coincidencias (): En la sintaxis anterior, Valor devuelto Si el evento de destino tiene una clase, devuelve ' verdadero ' más, ' falso ' es regresado. En un archivo JavaScript o una etiqueta de secuencia de comandos, use las líneas de código a continuación para verificar si event.target tiene una clase específica o no usando el ' partidos() ' método: En las líneas de código anteriores: Producción El GIF anterior muestra que solo div3 contiene el ' estilo div3 'clase como se muestra' verdadero ”. Para determinar si un evento desencadenado tiene una clase específica, use el JavaScript ' contiene() ” método o el “ partidos() ' método. Sin embargo, el método contains() es uno de los enfoques más útiles para determinar la clase de un elemento. Ambos métodos devuelven “ verdadero 'si el evento disparado tiene una clase más' falso ' es regresado. Esta publicación explicó los métodos para determinar si event.target tiene una clase en particular o no usa JavaScript.
< división clase = 'div div2Style' identificación = 'div2' > 2
< división clase = 'div div3Estilo' identificación = 'div3' > 3
división >
división >
división >
relleno : 10px ;
altura : 100px ;
ancho : 100 píxeles ;
margen : 10 píxeles ;
}
margen : auto ;
}
{
antecedentes - color : rojo ;
}
{
antecedentes - color : RGB ( 194 , 54 , 77 ) ;
}
{
antecedentes - color : rosado ;
}
donde tieneClase = evento. objetivo . Lista de clase . contiene ( 'centro' ) ;
alerta ( 'Este div contiene la clase 'centro': ' + tieneclase ) ;
} ) ;
Método 2: compruebe si event.target tiene una clase específica usando el método de coincidencias ()
Ejemplo
donde tieneClase = evento. objetivo . partidos ( '.div3Estilo' ) ;
alerta ( 'La clase de este div coincide con la clase 'div3Style': ' + tieneclase ) ;
} ) ;
Conclusión