OnLoad and OnMouse JavaScript Events - OnMouse Events
(Page 2 of 6 )
OnMouse events trigger based upon the user's mouse clicks. There are five in total, starting with the OnMouseDown event.
OnMouseDown
An OnMouseDown event is triggered when the user clicks a mouse button. In the following example, we create a program that will trigger a pop-up alert box to tell the user which element they are clicking on.
<html>
<head>
<script type="text/javascript">
function dontclickme(e)
{
var click
if (!e) var e = window.event
if (e.target) click = e.target
else if (e.srcElement) click = e.srcElement
if (click.nodeType == 3)
click = click.parentNode
var tname
tname=click.tagName
alert("Quit clicking on my " + tname + " element!")
}
</script>
</head>
<body onmousedown="dontclickme(event)">
<h1>Don't you dare click me!</h1>
<p>You may have clicked on the header...but you better not click here!</p>
<input type="submit" value="Click and you will get what for!">
</body>
</html>
In the above example if the user clicks on the phrase “Don’t you dare click me!”, a pop-up will appear with the following text: "Quit clicking on my H1 element!"
If they click on the phrase “You may have clicked on the header…but you better not click here!”, a pop-up will appear, saying: "Quit clicking on my P element."
Lastly, if the user clicks on the submit button, the text "Quit clicking on my Input element!" will appear in a pop-up alert.
A good use for this is if you have a bunch of photos on your site that you don’t want users to be able to download or copy. Simply set the trigger event on each photo with a pop-up alert telling them the images are copyright protected. When they try to save the pictures a pop-up will appear and they will find they are unable to do so.
Supporting HTML tags: <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
Supporting Javascript objects: button, document, link
Next: OnMouseMove >>
More JavaScript Articles
More By James Payne
/ 5 
