onmousedown - 向左还是向右？

Question

首先，我不是在寻找 jQuery 解决方案，只是在元素内部寻找简单的纯 Javascript 代码。

假设我们有以下 html 代码：

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

我想要元素内部有一个简单的脚本来显示弹出消息 alert() ，其中包含按下了哪个按钮以及元素与文档的相对位置的信息 - 类似 jQuery 中的 offset() 。

Answer 1

创建一个具有某个名称的 JavaScript 函数，然后在 onmousedown 事件上调用它，传递可在函数内部使用的 event 和 this 对象。

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

}

如果您打算使用 jQuery，那么您可以使用此脚本

$('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); 
});

更新：

如果您想要内联脚本，请尝试此操作。

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

Answer 2

MouseEvent.button在不同浏览器中有不同的值

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

Answer 3

...

window.captureEvents(Event.MOUSEDOWN)
window.onmousedown = mouseDown

function mouseDown(e)
{
  xPos = e.screenX;
  yPos = e.screenY;
  alert('onmousedown foo ' + ' x:' + xPos + ' y:'+ yPos);
}

编辑

...

Answer 4

编辑

在继续之前，您可能想阅读这篇文章：Javascript 疯狂：鼠标事件

单击文档会发送 MouseEvent 对象 具有许多属性 - 例如 MouseEvent.button 告诉您按下了哪个鼠标按钮，MouseEvent.ctrlKey告诉您单击发生时是否按下了控制键。

请注意，这些按钮并不是真正的“左”和“右”，因为它们可以根据用户偏好进行更改，您想知道的是它是否是主按钮（通常是左按钮，但可能是右按钮，或者可能是完全不同的按钮）来自其他定点设备）或辅助按钮（通常是右侧的，但同样可以是任何东西）。

一些播放代码：

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

编辑

啊，到底是什么：

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