document.onmousedown=function(e){
 var evt=window.event || e //cross browser event object
 alert(evt.button)
}

If you wish to detect when the right mouse button has been clicked to suppress the default browser's context menu from appearing, simply returning false inside an "onclick" or "onmousedown" event will have no effect. You will need to use the "oncontextmenu" event instead:

document.oncontextmenu=function(){
 return false //stops the browser context menu from appearing on right click
}

function preventbubble(e){
 if (e && e.stopPropagation) //if stopPropagation method supported
  e.stopPropagation()
 else
  event.cancelBubble=true
}

document.onmousemove=function(e){
 var evt=window.event || e //cross browser event object
 window.status=evt.clientX+" : "+evt.clientY
}

See "relatedTarget" in the Firefox section below for more info plus demonstration.

For a complete overview on detecting and responding to keyboard events, see the reference page "Keyboard and Mouse buttons events".

Firefox and other modern browsers do not support the "srcElement" property but instead the equivalent e.target property. To equalize this difference between all browsers, you can test whether the event object supports e.target, and if not, extend it with a custom e.target property using e.srcElement instead:

function myevent(e){
 var evt=window.event || e
 if (!evt.target) //if event obj doesn't support e.target, presume it does e.srcElement
  evt.target=evt.srcElement //extend obj with custom e.target prop
 //do something with evt.target, which is cross browser
}

For a complete overview on detecting and responding to keyboard events, see the reference page "Keyboard and Mouse buttons events".

• pageX: window.pageXOffset+e.clientX
• pageY: window.pageYOffset+e.clientY

The "relatedTarget" property (or "fromElement" and "toElement" in IE) is commonly used to detect whether the mouse is still within a container during a "mouseover" or "mouseout" event associated with it. Due to event bubbling, a "mouseover" event on a container for example can fire multiple times if the container contains any nested elements or even just text, as the mouse travels from one nested element to the next.

The following example shows the ID of the element the mouse is coming from and moving into during  a "mouseover" or "mouseout" event, respectively.

Demo (roll your mouse over the blocks below):

Source:

<div id="outerdiv" style="width:130px; height:130px; border:1px solid black; background:black; padding:30px;">
<div id="innerdiv" style="width:80px; height:80px; border:1px solid black; background:white; padding:20px"></div>
</div>

<div id="statusfrom"></div>
<div id="statusto"></div>



<script type="text/javascript">

function showtofrom(e){
 var evt=window.event || e
 if (evt.type=="mouseover"){ //for onmouseover event
  var fromElement=evt.fromElement || evt.relatedTarget
  statusdiv1.innerHTML='From Element: ' + fromElement.id
 }
 else{ //for onmouseout event
  var toElement=evt.toElement || evt.relatedTarget
  statusdiv2.innerHTML='To Element: ' + toElement.id
 }
}

var statusdiv1=document.getElementById("statusfrom")
var statusdiv2=document.getElementById("statusto")

document.body.onmouseover=showtofrom
document.body.onmouseout=showtofrom

</script>

The following example disables the default action of all links on the page that proceeds the script when clicked on, which is to go to the URL specified in its "href" attribute:

function disablelink(e){
 var evt=window.event || e
 if (evt.preventDefault) //supports preventDefault?
  evt.preventDefault()
 else //IE browser
  return false
}

var alllinks=document.getElementsByTagName("a")
for (var i=0; i<alllinks.length; i++){
 alllinks[i].onclick=disablelink
}

Consider divA that contains divB inside it. When you assign a click event to divA, clicking inside divB by default will also trigger the event due to event bubbling. To prevent that from happening, you can invoke stopPropagation() on the divB node so events occurring inside it do not continue to travel upwards:

Demo:

Code:

divB.onclick=function(e){
 if (e && e.stopPropagation) //if stopPropagation method supported
  e.stopPropagation()
 else
  event.cancelBubble=true
}