Member Avatar for prabhuraj

i need samples coding for MouseUp, MouseDown, MouseLeave,MouseEnter events which suitable for web application.

thanks,

  • 2 Contributors
  • 2 Replies
  • 62 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by prabhuraj

Dani AI

Generated

Hi — good question. Below is a minimal, modern pattern you can drop into a web page (no inline handlers). asked what you meant by "web application": these DOM events work in any browser-based UI (web pages or single-page apps). If you need touch/pen support, I also note a pointer-events option.

<button id="target">Click or hover me</button>

<script>
const target = document.getElementById('target');

target.addEventListener('mousedown', (e) => {
  if (e.button === 0) console.log('left down');
  else if (e.button === 2) console.log('right down');
});

target.addEventListener('mouseup', (e) => {
  console.log('mouse up, button:', e.button);
});

target.addEventListener('mouseenter', () => {
  target.classList.add('is-hovered');
});

target.addEventListener('mouseleave', () => {
  target.classList.remove('is-hovered');
});
</script>

Notes and tips: mouseenter/mouseleave do not bubble (use mouseover/mouseout for delegation). Check MouseEvent.button to distinguish left/right clicks. For unified mouse+touch input prefer Pointer Events (pointerdown/pointerup/pointerenter) on modern browsers. See the MDN docs for details on mouseenter/mouseleave and pointer events: mouseenter/mouseleave docs and Pointer events. If you run into specific issues (event order, right-click menu, delegation), post the failing snippet and I or others can help.

Recommended Answers

All 2 Replies

Member Avatar for farooqaaa

What do you mean by Web Application?

Member Avatar for prabhuraj

What do you mean by Web Application?

web application use to create web based applications
(ie web site).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.