Question

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

假设我们有以下html代码：

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

我希望元素内部有一个简单的脚本来显示弹出消息alert()，其中包含按下按钮的信息以及元素与文档<body>的相对位置 - 类似{{ 1）}在jquery中。

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

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

Answer 4

修改

您可能希望在继续之前阅读本文：Javascript Madness: Mouse Events

点击文档调度MouseEvent object，其中包含许多属性 - 例如。 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);">

onmousedown - 左还是右？

4 个答案:

修改

修改