Version

Evénements souris

Les événements relatifs à la souris (mouvement, appui sur un bouton) sont

mouseenter	la souris entre dans la zone couverte par l'élément, ou un de ses descendants
mouseleave	la souris sort de la zone couverte par l'élément et par ses descendants
mouseover	la souris entre dans la zone couverte par l'élément
mouseout	la souris quitte la zone couverte par l'élément
mousemove	la souris se déplace sur l'élément
mousedown	appui sur le bouton gauche de la souris
mouseup	relâchement du bouton gauche de la souris
click	clic : appui puis relâchement du bouton gauche de la souris
dblclick	double clic

Exemples

mouseenter et mouseleave

ces événements sont déclenchés quand la souris entre ou sort d'un élément. Si un élément en englobe d'autres, l'événement est déclenché à chaque fois que la souris entre ou sort d'un élément fils.

extérieur

intérieur

from browser import document

def mouseenter(ev):
    document["trace1"].text = f'entrée dans {ev.currentTarget.id}'

def mouseleave(ev):
    document["trace1"].text = f'sortie de {ev.currentTarget.id}'

for elt_id in ("jaune1", "bleu1"):
    document[elt_id].bind('mouseenter', mouseenter)
    document[elt_id].bind('mouseleave', mouseleave)

mouseover et mouseout

la différence avec mouseenter et mouseleave est qu'une fois que la souris est entrée dans un élément, l'événement n'est pas déclenché sur les éléments fils

extérieur

intérieur

from browser import document

def mouseover(ev):
    document["trace2"].text = f'entrée dans {ev.currentTarget.id}'

def mouseout(ev):
    document["trace2"].text = f'sortie de {ev.currentTarget.id}'

for elt_id in ["jaune2", "bleu2"]:
    document[elt_id].bind('mouseover', mouseover)
    document[elt_id].bind('mouseout', mouseout)

mousemove

déplacer la souris

from browser import document

def mousemove(ev):
    document["trace3"].text = f"coordonnées : {ev.x}, {ev.y}"

document["vert"].bind("mousemove", mousemove)

Attributs de l'objet `DOMEvent`

Pour les événements souris, l'instance de DOMEvent possède les attributs suivants

button	le numéro du bouton sur lequel on a appuyé
buttons	indique sur quels boutons de la souris on a appuyé pour déclencher l'événement. Chaque bouton sur lequel on peut appuyer est représenté par un entier donné (1 : bouton gauche, 2 : bouton droit, 4 : roue). Si on appuie sur plus d'un bouton, la valeur de `buttons` est combinée pour produire un nouveau nombre. Par exemple, si on appuie sur le bouton droit (2) et sur la roue (4), la valeur est égale à 2\|4, soit 6
x	la position de la souris par rapport au bord gauche de la fenêtre (en pixels)
y	la position de la souris par rapport au bord haut de la fenêtre (en pixels)
clientX	la position de la souris par rapport au bord gauche de l'élément dans lequel la souris se trouve au moment du clic (en pixels)
clientY	la position de la souris par rapport au bord haut de l'élément dans lequel la souris se trouve au moment du clic (en pixels)
screenX	comme x
screenY	comme y

Si la cible de l'événement est un élément SVG (le conteneur défini par une balise <SVG>), l'objet événement a des attributs supplémentaires:

svgX, svgY

les coordonnées X, Y de la souris, relativement à l'angle supérieur gauche de l'élément SVG

Version

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de `import`

Packages Brython

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Evénements souris

Exemples

Attributs de l'objet `DOMEvent`

Version 3.133.123.113.10

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Evénements souris

Exemples

Attributs de l'objet DOMEvent

Version

Attributs de l'objet `DOMEvent`