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