Menu
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.
863
The onmousedown attribute fires when a mouse button is pressed down on the element. Tip: The order of events related to the onmousedown event (for the left/middle mouse button): onmousedown. onmouseup.
You would use onMouseDown if you want to preventDefault as soon as the user clicks on a button. This is preferred in a texteditor where you want to keep the focus on the input while clicking on buttons that change the styles of the text.
MouseDown and MouseUp events enable you to distinguish between the left, right, and middle mouse buttons. You can also write code for mouse-keyboard combinations that use the SHIFT, CTRL, and ALT keyboard modifiers.
To cause a MouseDown event for a form section to occur, press the mouse button in a blank area of the form section. The following apply to MouseDown events: If a mouse button is pressed while the pointer is over a form or control, that object receives all mouse events up to and including the last MouseUp event.
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>
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
<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>
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
