javascript多次点击鼠标显示坐标

Question

我目前正在学习 JavaScript，并且我已经能够编写一个事件处理程序，用于当用户单击将输出鼠标点击坐标的文档时。

但是我遇到的问题是它只会执行一次。我认为如果事件处理程序正在等待“点击”并且如果它得到一个它将调用函数 getCords。

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

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

Answer 1

关于 MDN :

document.writeln is the same as document.write but adds a newline.

所以，let's look at document.write :

Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call. Once you have finished writing, it is recommended to call document.close(), to tell the browser to finish loading the page. The text you write is parsed into the document's structure model. In the example above, the h1 element becomes a node in the document.

这是什么意思？

这意味着你的代码真的看起来像这样:

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
}

现在更清楚发生了什么 — 我们正在这里创建一个新文档流。您现有的文件内容被覆盖；事件处理程序不复存在。

事实上，the DOM standard says this explicitly about open :

Open a document stream for writing. If a document exists in the target, this method clears it.

并且您的新文档不包含您的脚本，因此即使在回调中重新分配事件处理程序也行不通。

最好根本不要使用document.write(和document.writeln)；将文本分配为某些 div 或 span 节点的内容。