All geek questions in one place

Onmousedown - left or right?

First of all, I'm not looking for a jquery solution, just pure javascript code inside the element.

Say we have the following html code:

<select onmousedown=" ??? ">...</select>

I want a simple script element inside the element to display an alert() pop-up message with information about which button was clicked and that the relative position of the element in the <body> document is something like offset() in JQuery.

+4
source share
4 answers

Create a JavaScript function with some name, and then call it on the onmousedown event, passing the event and this object, which you can use 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 on using jQuery, 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 to embed a script, 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>
+4
source

MouseEvent.button has different meanings in different browsers

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

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

Edit

You may like to read this article before moving on: Javascript Madness: Mouse Events

Presses a MouseEvent object to send the document, which has many properties. MouseEvent.button tells you which mouse button was clicked, MouseEvent.ctrlKey tells you if the control key was pressed when the click occurred.

Please note that the buttons are not really โ€œleftโ€ and โ€œrightโ€, as they can be changed according to user settings, that you want to know if this is the main button (usually left, but may be correct or may be something completely different from any other pointing device) or a secondary button (usually right, but again, it could be anything).

Some replay codes:

 <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

What the hell:

 <select onmousedown="alert('Button: ' + event.button + '\nPosition: ' + this.offsetLeft + ',' + this.offsetTop);">
0
source

Source: https://habr.com/ru/post/1397346/

More articles:


All Articles