单击鼠标的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与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节点的内容。