El atributo pointer-events nos permite definir si un elemento puede ser el objetivo de un evento del mouse o cuándo. Se aplica a los siguientes elementos: <a>, <circle>, <clipPath>, <defs>, <elipse>, <foreignObject>, <g>, <image>, <line>, <marker>, <mask >, <ruta>, <patrón>, <polígono>, <polilínea>, <rect>, <svg>, <interruptor>, <símbolo>, <texto>, <textPath>, <tspan>, <use>.
Sintaxis:
pointer-events = bounding-box | visiblePainted | visibleFill |
visibleStroke | visible | painted | fill |
stroke | all | none
Valores de atributo: el atributo pointer-events acepta los valores mencionados anteriormente y descritos a continuación:
- auto: se usa para describir que un elemento debe reaccionar a eventos de puntero.
- ninguno: se utiliza para describir que un elemento no reacciona a los eventos de puntero.
- visiblePainted: este valor solo puede ser el destino de un evento de puntero cuando el cursor del mouse está sobre el interior o el perímetro del elemento y la propiedad de relleno o trazo se establece en un valor distinto de ninguno.
- visibleFill: este valor solo puede ser el objetivo de un evento de puntero cuando el cursor del mouse está sobre el interior del elemento.
- visibleStroke: este valor solo puede ser el objetivo de un evento de puntero cuando el cursor del mouse está sobre el perímetro del elemento.
- visible: este valor solo puede ser el objetivo de un evento de puntero cuando el cursor del mouse está sobre el interior o el perímetro del elemento.
- pintado: este valor solo puede ser el destino de un evento de puntero cuando el cursor del mouse está sobre el interior o el perímetro del elemento y la propiedad de relleno o trazo se establece en un valor distinto de ninguno.
- relleno: este valor solo puede ser el objetivo de un evento de puntero cuando el puntero está sobre el interior del elemento.
- trazo: este valor solo puede ser el destino de un evento de puntero cuando el puntero está sobre el perímetro del elemento.
- all: este valor solo puede ser el objetivo de un evento de puntero cuando el puntero está sobre el interior o el perímetro del elemento.
Los siguientes ejemplos ilustran el uso del atributo pointer-events .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h2>
GeeksforGeeks
</h2>
<svg viewBox="0 0 100 10"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="0" height="10"
width="10" fill="green" />
<ellipse cx="8" cy="5" rx="5" ry="4"
fill="black"
pointer-events="visiblePainted" />
</svg>
</div>
<script>
window.addEventListener(
'mouseup', (e) => {
let geekColor =
Math.round(Math.random() *
0xFFFFFF)
let fill =
'#' + geekColor.toString(16).
padStart(5, '0')
e.target.style.fill = fill
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h2>
GeeksforGeeks
</h2>
<svg viewBox="0 0 100 10"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="0" height="10"
width="10" fill="green" />
<ellipse cx="8" cy="5" rx="5"
ry="4" fill="black"
pointer-events="none" />
</svg>
</div>
<script>
window.addEventListener(
'mouseup', (e) => {
let geekColor =
Math.round(Math.random()
* 0xFFFFFF)
let fill =
'#' + geekColor.toString(16).
padStart(6, '0')
e.target.style.fill = fill
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA