JavaScript отображает координаты щелчка мышью более одного раза - PullRequest
Новая
       4

JavaScript отображает координаты щелчка мышью более одного раза

1 голос
/ 07 января 2012

В данный момент я только изучаю JavaScript и смог написать обработчик событий, когда пользователь нажимает на документ, который будет выводить координаты щелчков мыши.

Однако проблема, с которой я столкнулся, заключается в том, что он сделает это только один раз . Я подумал, что если обработчик событий ожидает «щелчка» и если он получен, он вызовет функцию getCords. 

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.writeln(event.clientX, ",", event.clientY)
}

1 Ответ

4 голосов
/ 07 января 2012

Вкл. MDN :

document.writeln совпадает с document.write, но добавляет символ новой строки.

Итак, давайте рассмотрим document.write:

Запись в уже загруженный документ без вызова document.open() автоматически выполнит вызов document.open.После того, как вы закончили писать, рекомендуется позвонить document.close(), чтобы сообщить браузеру завершить загрузку страницы.Текст, который вы пишете, анализируется в модели структуры документа.В приведенном выше примере элемент h1 становится узлом в документе.

Что это значит?

Это означает, что ваш код действительно выглядит следующим образом: 

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.open(); // <-------- new
    x.writeln(event.clientX, ",", event.clientY)
}

Первое исправление (которое также остановит страницу, отображающуюся как «загрузка» навсегда) - это добавление вызова document.close() в соответствии с рекомендациями: 

var x = document;
x.addEventListener("click", getCords, false);

function getCords(event){
    x.open(); // <-------- new
    x.writeln(event.clientX, ",", event.clientY)
    x.close(); // <-------- new
}

СейчасПонятнее, что происходит - мы создаем новый поток документов здесь.Ваше существующее содержание документа перезаписано;обработчик событий перестает существовать.

Фактически, стандарт DOM прямо говорит об этом open:

Открыть поток документов для записи. Если документ существует в целевом объекте, этот метод очищает его.

И ваш новый документ не содержит ваш скрипт, поэтому даже переназначение обработчика события внутри обратного вызоване будет работать.

Лучше всего вообще не использовать document.write (и document.writeln);вместо этого присвойте тексту содержимое некоторого узла div или span.

...