5

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

假设我们有以下 html 代码：

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

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

4

4 回答 4

5

创建一个具有某个名称的 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>
于 2012-02-20T01:40:53.193 回答
3

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

MouseEvent.button == 1// means left key in ie6~ie8
MouseEvent.button == 0// means left key in ie9&others
于 2012-02-20T02:08:55.117 回答
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);
}

编辑

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

于 2012-02-20T01:16:42.880 回答
0

编辑

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

单击文档会调度具有许多属性的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);">
于 2012-02-20T01:53:48.543 回答