onmousedown - left or right?

javascript html jquery dom-events onmousedown
Ωmega picture Ωmega · Feb 20, 2012 · Viewed 14.7k times · Source

First of all, I am not looking for jQuery solution, just simple pure Javascript code, inside of an element.

Let's say we have following html code:

<select onmousedown=" ??? ">...</select>

I want a simple script inside of the element to show popup message alert() with information which button was pushed down and what is a relative position of the element to the document <body> - something like offset() in jQuery.

Answer

ShankarSangoli picture ShankarSangoli · Feb 20, 2012

Create a JavaScript function with some name and then call it on onmousedown event passing the event and this object which can be used inside the function.

HTML

<select onmousedown="onMouseDown(event, this)">...</select>

JS

function onMouseDown(e, obj){
   e = e || window.event; //window.event for IE

   alert("Keycode of key pressed: " + (e.keyCode || e.which));
   alert("Offset-X = " + obj.offsetLeft);
   alert("Offset-Y = " + obj.offsetTop);

}

If you plan to use jQuery then you can use this script

$('select').mousedown(function(e){
    alert("Keycode of key pressed: " + e.which);

    //Inside the handler this points to the select DOM element
    alert("Offset-X = " + $(this).offset().left);
    alert("Offset-Y = " + $(this).offset().top); 
});

Update:

If you want inline script then try this.

<select onmousedown="function(e, obj){ e = e || window.event;alert('Keycode of key pressed: ' + (e.keyCode || e.which));alert('Offset-X = ' + obj.offsetLeft);alert('Offset-Y = ' + obj.offsetTop);}(event, this);">...</select>

Related questions

jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <…

Read More
How do you detect the clearing of a "search" HTML5 input?

In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery …

Read More
Jquery Event won't fire after ajax call

This is a rather strange issue with jquery. I am loading a div <div id="container"> on page load. Each record is tabular data with a 'delete' ajax function associated with it. When the page loads and clicking …

Read More