прикрепление слушателей к телу не работает? - PullRequest
Новая
       33

прикрепление слушателей к телу не работает?

0 голосов
/ 06 июня 2011

Я не могу понять, почему этот кусок кода не работает: 

<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>

Нет даже никакой ошибки .. просто ничего не происходит.

удивительно, если я изменю 'mousedown' на 'keydown', это работает 

   <!DOCTYPE html>
    <html><head></head><body onload="
    document.body.addEventListener('keydown',function(e){
    alert(123);
    },false);
    "></body></html>

(я использую Chrome кстати)

Ответы [ 4 ]

3 голосов
/ 06 июня 2011

Работает нормально ( см. Код ).

Обратите внимание, что я добавил некоторый контент и добавил границу к body, чтобы вы могли видеть его размеры. Если вы удалите содержимое , все, что вы видите, будет черной линией. body не занимает места, если нет содержимого (как и любого другого элемента блока), что означает, что вы не можете щелкнуть внутри него.

Кажется, вы думали, что body будет распространяться по всему окну браузера, но это не так.

Если вместо этого вы прикрепите обработчик к window, он получит все события, происходящие внутри видимой области.

2 голосов
/ 06 июня 2011

Значение this в слушателях, прикрепленных к элементу body, ведет себя немного по-разному в разных браузерах.Попробуйте следующее в Firefox и более старой версии IE (обратите внимание, что это специально для этого случая, это не означает, что это общая функция «что это?»): 

<head>
<title>Some "this" tests</title>

<script type="text/javascript">

var whatIs = (function(global) {
  return function(that) {

    // If String(that) isn't useful, try some stuff
    if (String(that) == '[object]') {
      if (that == global || that == window) {
        alert('window');
      } else if (typeof that.tagName == 'string') {
        alert(that.tagName);
      } else {
        alert(that);
      }

    // Otherwise show that
    } else {
      alert(that);
    }
  }
})(this);

</script>
</head>
<body onclick="whatIs(this);"  onload="whatIs(this);">
  <div onmousedown="whatIs(this)">this</div>
</body>

Во всех браузерах, загрузка показывает окно и нажатие на div показывает this как div.При щелчке по телу это будет окном в Firefox, но элемент body в IE, Opera и Chrome.

1 голос
/ 06 июня 2011

Альтернативой является использование jQuery bind. Это не только делает ваш код меньше, но также поддерживается большинством браузеров. Попробуйте это: 

$('body').bind('click mousedown', function() {
  alert(123);
});
0 голосов
/ 06 июня 2011

Попробуйте вместо этого использовать объект глобального окна: 

<!DOCTYPE html>
<html><head></head><body onload="
window.addEventListener('click',function(e){
alert(123);
},false);
"></body></html>

Для данного HTML тело не имеет высоты и ширины, поэтому оно не будет получать никаких событий мыши при нажатии на окно.Он все еще может получать ключевые события, хотя.Если вы дадите ему высоту и ширину, он будет работать. 

<!DOCTYPE html>
<html><head></head><body style="height:1000px; width:1000px" onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>
...