onmousedown - 左键还是右键？

Question

onmousedown - 左键还是右键？

javascripthtmljquerydom-eventsonmousedown

5

首先，我不寻求jQuery解决方案，只需要一个简单的纯JavaScript代码，放在元素内部。

假设我们有以下HTML代码：

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

我希望在元素内部添加一个简单的脚本来显示弹出消息alert()，并提供有关哪个按钮被按下以及元素相对于文档<body>的位置的信息 - 类似于jQuery中的offset()。

- Ωmega

“我不是在寻找一个jQuery的解决方案”... *放置jQuery标签* :P - Šime Vidas

@Šime Vidas :: 这意味着我正在寻找jQuery的替代代码 :D - Ωmega

4个回答

3

在不同的浏览器中，MouseEvent.button的值是不同的。

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

- Guan Yuxin

2

为了让你开心，IE浏览器中，“left”按钮在mousedown和mouseup事件中的值为1，但在click、dblclick和contextmenu事件中的值为0。 - RobG

1

<select id="foo" onmousedown="mouseDown()">...</select>

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

编辑

<select id="foo" onmousedown="function mouseDown(e){alert(MouseEvent.button + ' x:' + e.screenX + ' y:'+ e.screenY);}">...</select>

- Fraser

我真正的意思是元素内部的脚本，因此需要在<select onmousedown=" ??? ">...</select>代码中替换掉???的内容。 - Ωmega

只需将脚本移动到onmousedown属性中即可。 - Fraser

我无法给函数分配任何新名称，也无法创建新的全局变量。你的代码还没有检查哪个按钮被按下，是主要（左）还是其他按钮... - Ωmega

再次强调，只需将脚本移动到onmousedown属性中即可。 - Fraser

0

编辑

在继续之前，您可能想阅读这篇文章：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);">

- RobG

没有元素的ID可用，代码需要放在元素内部，不要创建新的全局变量，也不要为新函数创建新名称。 - Ωmega

然后将代码放入处理程序中，上面的内容只是为了帮助你。我不会为你编写代码。 - RobG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ShankarSangoli · Accepted Answer

创建一个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>