5

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ωmega
  • 42,614
  • 34
  • 134
  • 203

4 Answers4

5

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>
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • There is no need in this case to use `e || window.event` since you are passing `event` from the listener. – RobG Feb 20 '12 at 01:58
  • In IE it doesn't work so we have to access it using window.event. – ShankarSangoli Feb 20 '12 at 02:06
  • @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 `` code. – Ωmega Feb 20 '12 at 04:12
  • 1
    @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 Feb 20 '12 at 06:03
  • @RobG - I am talking about IE7 and less. May be it works in IE8+ – ShankarSangoli Feb 20 '12 at 06:56
  • @ShankarSangoli: I think, that one can use `arguments[0]` instead of `event` as the parameter: ``. In the way the `this` parameter of `onMouseDown` will be set to the DOM of the current ` – Oleg Mar 01 '12 at 10:06
3

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
Guan Yuxin
  • 410
  • 6
  • 12
  • 2
    Just to make your day, in IE the "left" button is 1 for *mousedown* and *mouseup*, but 0 for *click*, *dblclick* and *contextmenu* events. – RobG Feb 20 '12 at 02:50
1

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

Fraser
  • 15,275
  • 8
  • 53
  • 104
  • :: I really mean script **inside of an element**, so something that would replace **???** in the `` code. – Ωmega Feb 20 '12 at 01:42
  • Just move the script into the onmousedown attribute then – Fraser Feb 20 '12 at 02:00
  • :: 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... – Ωmega Feb 20 '12 at 04:19
  • Again, Just move the script into the onmousedown attribute then – Fraser Feb 20 '12 at 09:18
0

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);">
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
RobG
  • 142,382
  • 31
  • 172
  • 209
  • 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 Feb 20 '12 at 04:16
  • 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. – RobG Feb 20 '12 at 06:06