Element : méthode setCapture()

Obsolète

Évitez d'utiliser cette fonctionnalité dans de nouveaux projets. Cette fonctionnalité peut être candidate à la suppression des standards web ou des navigateurs.

En savoir plus
Voir la compatibilité complète

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

La méthode setCapture() de l'interface Element permet de gérer un évènement mousedown afin de rediriger tous les évènements de la souris vers cet élément jusqu'à ce que le bouton de la souris soit relâché ou que Document.releaseCapture() soit appelée.

Attention : Cette interface n'a jamais bénéficié d'un large support inter-navigateurs et vous recherchez probablement plutôt Element.setPointerCapture(), de l'API Pointer Events.

Syntaxe

setCapture(retargetToElement)

Paramètres

retargetToElement: Si true, tous les évènements sont ciblés directement vers cet élément ; si false, les évènements peuvent aussi être déclenchés sur les descendants de cet élément.

Valeur de retour

Aucune (undefined).

Exemples

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après avoir cliqué et maintenu enfoncé un élément.

html

<p>
  Ceci est un exemple de l'utilisation de la capture de la souris sur des
  éléments dans Gecko 2.0.
</p>
<p><a id="monBouton" href="#">Testez-moi</a></p>
<div id="sortie">Pas encore d'évènements</div>

css

#monBouton {
  border: solid black 1px;
  color: black;
  padding: 2px;
  box-shadow: black 2px 2px;
}

function mouseDown(e) {
  e.target.setCapture();
  e.target.addEventListener("mousemove", mouseMoved);
}

function mouseUp(e) {
  e.target.removeEventListener("mousemove", mouseMoved);
}

function mouseMoved(e) {
  const output = document.getElementById("sortie");
  output.textContent = `Position: ${e.clientX}, ${e.clientY}`;
}

const btn = document.getElementById("monBouton");
if (btn.setCapture) {
  btn.addEventListener("mousedown", mouseDown);
  btn.addEventListener("mouseup", mouseUp);
} else {
  document.getElementById("sortie").textContent =
    "Désolé, il semble qu'il n'y ait pas de prise en charge de setCapture dans ce navigateur";
}

Voir l'exemple en direct ^(angl.)