Introduction

Installation

Questions fréquemment posées

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

Distribution standard

Implémentation de import

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

 

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
mouseleavela souris sort de la zone couverte par l'élément et par ses descendants
mouseoverla souris entre dans la zone couverte par l'élément
mouseoutla souris quitte la zone couverte par l'élément
mousemovela souris se déplace sur l'élément
mousedownappui sur le bouton gauche de la souris
mouseuprelâchement du bouton gauche de la souris
clickclic : appui puis relâchement du bouton gauche de la souris
dblclickdouble 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

buttonle numéro du bouton sur lequel on a appuyé
buttonsindique 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
xla position de la souris par rapport au bord gauche de la fenêtre (en pixels)
yla position de la souris par rapport au bord haut de la fenêtre (en pixels)
clientXla 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)
clientYla 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)
screenXcomme x
screenYcomme y