Search code examples
javascripthtmljquerydom-eventsonmousedown

onmousedown - left or right?

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.

Solution

  • 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>