Mouse Events in JavaScript

1// Method 1: Click events
2const button = document.getElementById('myButton');
3
4button.addEventListener('click', function(e) {
5    console.log('Clicked');
6});
7
8button.addEventListener('dblclick', function(e) {
9    console.log('Double clicked');
10});
11
12// Method 2: Mouse position
13const element = document.getElementById('myElement');
14
15element.addEventListener('mousemove', function(e) {
16    console.log('X:', e.clientX, 'Y:', e.clientY);
17    console.log('Page X:', e.pageX, 'Page Y:', e.pageY);
18    console.log('Offset X:', e.offsetX, 'Offset Y:', e.offsetY);
19});
20
21// Method 3: Mouse enter/leave
22element.addEventListener('mouseenter', function(e) {
23    console.log('Mouse entered');
24    e.target.style.backgroundColor = 'yellow';
25});
26
27element.addEventListener('mouseleave', function(e) {
28    console.log('Mouse left');
29    e.target.style.backgroundColor = '';
30});
31
32// Method 4: Mouse over/out (bubbles)
33element.addEventListener('mouseover', function(e) {
34    console.log('Mouse over');
35});
36
37element.addEventListener('mouseout', function(e) {
38    console.log('Mouse out');
39});
40
41// Method 5: Mouse down/up
42element.addEventListener('mousedown', function(e) {
43    console.log('Mouse button pressed:', e.button);
44    // 0: left, 1: middle, 2: right
45});
46
47element.addEventListener('mouseup', function(e) {
48    console.log('Mouse button released');
49});
50
51// Method 6: Context menu (right click)
52element.addEventListener('contextmenu', function(e) {
53    e.preventDefault();
54    console.log('Right click prevented');
55    // Show custom context menu
56});
57
58// Method 7: Mouse buttons
59element.addEventListener('mousedown', function(e) {
60    if (e.button === 0) {
61        console.log('Left button');
62    } else if (e.button === 1) {
63        console.log('Middle button');
64    } else if (e.button === 2) {
65        console.log('Right button');
66    }
67    
68    // Check which buttons are pressed
69    console.log('Buttons:', e.buttons);
70    // 1: left, 2: right, 4: middle
71});
72
73// Method 8: Drag detection
74let isDragging = false;
75
76element.addEventListener('mousedown', function(e) {
77    isDragging = true;
78    console.log('Drag started');
79});
80
81element.addEventListener('mousemove', function(e) {
82    if (isDragging) {
83        console.log('Dragging at:', e.clientX, e.clientY);
84    }
85});
86
87element.addEventListener('mouseup', function(e) {
88    if (isDragging) {
89        isDragging = false;
90        console.log('Drag ended');
91    }
92});