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但增加了一个换行符。

所以，let's look at 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 
} 

现在，它更清晰这是怎么回事—我们在这里创建一个新文件流。您现有的文件内容被覆盖;事件处理程序不复存在。

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

打开用于写入的文件流。 如果目标中存在文档，则此方法将清除它。

而您的新文档不包含您的脚本，因此即使在回调中重新分配事件处理程序也不起作用。

最好不要使用document.write（和document.writeln）;改为将文本分配为某些div或span节点的内容。