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.
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.
-
"I'm not looking for a jQuery solution"... *puts jquery tag*
:P– Šime Vidas Commented Feb 20, 2012 at 1:26 - @Šime Vidas :: which means I am looking for jquery alternative code :D – Ωmega Commented Feb 20, 2012 at 1:44
4 Answers
Reset to default 5Create 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>
Edit
You might like to read this article before you go any further: Javascript Madness: Mouse Events
Clicks on a document dispatch a MouseEvent object that has lots of properties—e.g. MouseEvent.button tells you which mouse button was pressed, MouseEvent.ctrlKey tells you if the control key was pressed when the click occured.
Note that the buttons aren't really "left" and "right", since they can be changed by user preferences, what you want to know is whether it was the primary button (usually left but might be right or could be something totally different from some other pointing device) or the secondary button (usually right but again, could be anything).
Some play code:
<script>
function clickDetails(e) {
e = e || window.event;
var msg = [];
for (var p in e) {
msg.push(p + ': ' + e[p]);
}
document.getElementById('msg').innerHTML = msg.join('<br>');
}
window.onload = function() {
document.getElementById('sp0').onmousedown = clickDetails;
}
</script>
<div>
<span id="sp0">click me</span>
<br>
<span id="msg"></span>
</div>
Edit
Ah, what the hell:
<select onmousedown="alert('Button: ' + event.button
+ '\nPosition: ' + this.offsetLeft
+ ',' + this.offsetTop);">