GlobalEventHandlers.onmousedown

La propriété onmousedown, rattachée au mixin GlobalEventHandlers, est un gestionnaire d'évènements (en-US) qui permet de traiter les évènements mousedown.

L'évènement mousedown est déclenché lorsqu'on appuie sur le bouton de la souris.

Note : Le gestionnaire d'évènements opposé à onmousedown est onmouseup.

Syntaxe

cible.onmousedown = refFonction;

Valeur

refFonction est un nom de fonction ou une expression de fonction. La fonction reçoit un objet MouseEvent comme unique argument.

Exemple

Cet exemple révèle une partie d'une image lorsqu'on appuie et maintient un bouton de souris. Il utilise les gestionnaires d'évènements onmousedown, onmouseup, et onmousemove.

HTML

<div class="container">
  <div class="view" hidden></div>
  <img src="rhino.jpg">
</div>

CSS

.container {
  width: 300px;
  height: 227px;
  background: black;
}

.view {
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
}

img {
  mix-blend-mode: darken;
}

JavaScript

function showView(event) {
  view.removeAttribute('hidden');
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
  event.preventDefault();
}

function moveView(event) {
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
}

function hideView(event) {
  view.setAttribute('hidden', '');
}

const container = document.querySelector('.container');
const view = document.querySelector('.view');

container.onmousedown = showView;
container.onmousemove = moveView;
document.onmouseup = hideView;

Résultat

Spécifications

Specification
HTML Standard # handler-onmousedown

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

L'évènement mousedown