onmousedown - left or right?

javascript html jquery dom-events onmousedown

15,384

Solution 1

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>

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>

Solution 2

MouseEvent.button has different values in different browsers

MouseEvent.button == 1// means left key in ie6~ie8
MouseEvent.button == 0// means left key in ie9&others

Solution 3

<select id="foo" onmousedown="mouseDown()">...</select>

window.captureEvents(Event.MOUSEDOWN)
window.onmousedown = mouseDown

function mouseDown(e)
{
  xPos = e.screenX;
  yPos = e.screenY;
  alert('onmousedown foo ' + ' x:' + xPos + ' y:'+ yPos);
}

Edit

<select id="foo" onmousedown="function mouseDown(e){alert(MouseEvent.button + ' x:' + e.screenX + ' y:'+ e.screenY);}">...</select>

15,384

Author by

Ωmega

Updated on June 17, 2022

Comments

Ωmega almost 2 years
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.
- Šime Vidas about 12 years
  
  "I'm not looking for a jQuery solution"... *puts jquery tag* :P
- Ωmega about 12 years
  
  @Šime Vidas :: which means I am looking for jquery alternative code :D
Ωmega about 12 years

:: I really mean script inside of an element, so something that would replace ??? in the <select onmousedown=" ??? ">...</select> code.
RobG about 12 years

There is no need in this case to use e || window.event since you are passing event from the listener.
Fraser about 12 years

Just move the script into the onmousedown attribute then
ShankarSangoli about 12 years

In IE it doesn't work so we have to access it using window.event.
RobG about 12 years

Just to make your day, in IE the "left" button is 1 for mousedown and mouseup, but 0 for click, dblclick and contextmenu events.
Ωmega about 12 years

@ShankarSangoli :: I need solution without using any new name for function, as I need this for a code that other partners will need to add to their existing pages, so to eliminate risk of function name and/or variables conflict(s), I need solution without assigning some names to function and/or global variables. And I really mean script inside of an element, so something that would replace ??? in the <select onmousedown=" ??? ">...</select> code.
Ωmega about 12 years

No id for element available, the code needs to be inside of the element, no new global variables, no new names for new functions.
Ωmega about 12 years

:: I cannot assign any new names to function as well as cannot create new global variables. Your code also do not check witch button was pushed, if primary (left) or some other...
RobG about 12 years

@ShankarSangoli—you are mistaken. When you write < ... onclick="fn(event)"> then in IE the identifier event resolves to window.event and that is what is passed to fn(). In Mozilla and other browsers, it resolves to the event object of the handler, so they too passes a reference to the related event.
RobG about 12 years

Then put the code in the handler, the above is just to help you out. I'm not going to write your code for you.
ShankarSangoli about 12 years

@RobG - I am talking about IE7 and less. May be it works in IE8+
Fraser about 12 years

Again, Just move the script into the onmousedown attribute then
Oleg about 12 years

@ShankarSangoli: I think, that one can use arguments[0] instead of event as the parameter: <select onmousedown="return onMouseDown.call(this, arguments[0]);">...</select>. In the way the this parameter of onMouseDown will be set to the DOM of the current <select> and the onMouseDown function can return false to stop default processing. One should only define onMouseDown function as var onMouseDown = function (e) {}; because function don't support this, at least in the strict mode of JavaScript.