onmousedown - влево или вправо? - PullRequest
Новая
       44

onmousedown - влево или вправо?

4 голосов
/ 20 февраля 2012

Прежде всего, я не ищу решение jquery, просто простой чистый код javascript внутри элемента.

Допустим, у нас есть следующий HTML-код:

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

Я хочу, чтобы простой элемент внутри элемента отображал всплывающее сообщение alert() с информацией о том, какая кнопка была нажата и какова относительная позиция элемента в документе <body> - что-то вроде offset() в jquery.

Ответы [ 4 ]

4 голосов
/ 20 февраля 2012

Создайте функцию 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>
2 голосов
/ 20 февраля 2012

MouseEvent.button имеет разные значения в разных браузерах 

MouseEvent.button == 1// means left key in ie6~ie8
MouseEvent.button == 0// means left key in ie9&others
1 голос
/ 20 февраля 2012

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

0 голосов
/ 20 февраля 2012

Редактировать

Возможно, вы захотите прочитать эту статью, прежде чем идти дальше: Javascript Madness: Mouse Events

Клики по документу отправляют объект 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);">
...