Mouse events

The mouse-related events (movement, pressing a button) are

mouseenter	A pointing device is moved onto the element that has the listener attached
mouseleave	a pointing device is moved off the element that has the listener attached
mouseover	a pointing device is moved onto the element that has the listener attached or onto one of its children
mouseout	a pointing device is moved off the element that has the listener attached or off one of its children
mousemove	a pointing device is moved over an element
mousedown	a pointing device button (usually a mouse) is pressed on an element
mouseup	a pointing device button is released over an element
click	a pointing device button has been pressed and released on an element
dblclick	a pointing device button is clicked twice on an element

Examples

mouseenter and mouseleave

these events are triggered when the mouse enters or leaves an element. If an element includes other ones, the event is triggered every time the mouse enters or leaves a child element

outer

inner

from browser import document

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

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

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

mouseover and mouseout

the difference with mouseenter and mouseleave is that once the mouse entered an element, the event is not triggered on its children elements

outer

inner

from browser import document

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

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

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

mousemove

move the mouse
from browser import document def mousemove(ev): document["trace3"].text = f"coordinates : {ev.x}, {ev.y}" document["green"].bind("mousemove", mousemove)

`DOMEvent` instance attributes

For mouse events, the instance of DOMEvent has the following attributes

button	indicates which button was pressed on the mouse to trigger the event
buttons	indicates which buttons were pressed on the mouse to trigger the event. Each button that can be pressed is represented by a given number (1 : Left button, 2 : Right button, 4 : Wheel button). If more than one button is pressed, the value of the buttons is combined to produce a new number. For example, if the right button (2) and the wheel button (4) are pressed, the value is equal to 2\|4, which is 6
x	position of the mouse relatively to the left border of the window (in pixels)
y	position of the mouse relatively to the upper border of the window (in pixels)
clientX	the X coordinate of the mouse pointer in local (DOM content) coordinates
clientY	the Y coordinate of the mouse pointer in local (DOM content) coordinates
screenX	the X coordinate of the mouse pointer in global (screen) coordinates
screenY	the Y coordinate of the mouse pointer in global (screen) coordinates

If the target of the event is an SVG element (the container defined by a <SVG> tag), the event has the additional attributes:

svgX, svgY

the X, Y coordinates of the mouse pointer, relatively to the upper left corner of the SVG element

Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

`import` implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

Mouse events

Examples

`DOMEvent` instance attributes

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

Mouse events

Examples

DOMEvent instance attributes

`DOMEvent` instance attributes