Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

JavaScript mouse events

Suggested Videos
Part 42 - JavaScript event capturing
Part 43 - Preventing browser default action
Part 44 - JavaScript to detect which mouse button is clicked

In this video we will discuss the commonly used JavaScript mouse events. Most browsers support these events.

mouseoverOccurs when the mouse pointer is moved over an element
mouseoutOccurs when the mouse pointer is moved out of an element
mousemoveOccurs when the mouse pointer is moving while it is over an element
mouseupOccurs when the mouse button is released over an element
mousedownOccurs when the mouse button is pressed over an element
clickOccurs when the mouse button is clicked. mousedown, mouseup & click events occur in sequence
dblclickOccurs when the mouse button is double-clicked. mousedown, mouseup, mousedown, mouseup, click & dblclick events occur in sequence
contextmenuOccurs when the mouse right button is clicked. mousedown, mouseup & contextmenu events occur in sequence

Here is an example which logs the mouse events to textarea element as they occur.

javascript mouse events list

<input type="button" value="Single, Double or Right Click" onclick="logEvent(event)" onmousedown="logEvent(event)" onmouseup="logEvent(event)" onmouseover="logEvent(event)" onmouseout="logEvent(event)" ondblclick="logEvent(event)" oncontextmenu="logEvent(event)" />

<input type="button" value="Clear" onclick="clearText()"/>
<br /><br />
<textarea id="txtArea" rows="10" cols="20"></textarea>
<script type="text/javascript">
    function logEvent(event)
        event = event || window.event;
        document.getElementById("txtArea").value += event.type + "\r\n";

    function clearText()
        document.getElementById("txtArea").value = "";

JavaScript tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.