JavaScript显示鼠标点击的坐标不止一次
问题描述:
我刚刚学习JavaScript,并且当用户单击将输出鼠标点击坐标的文档时,我已经能够编写事件处理函数。JavaScript显示鼠标点击的坐标不止一次
但是我遇到的问题是,它只会做一次。我认为,如果事件处理程序正在等待“单击”,并且如果它有一个,它会唤起函数getCords。
var x = document;
x.addEventListener("click", getCords, false);
function getCords(event){
x.writeln(event.clientX, ",", event.clientY)
}
答
在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
节点的内容。
梦幻般的答案。 – jergason 2012-01-07 15:19:32
@Jergason:Ta,鸭! – 2012-01-07 15:20:31
完美!感谢您的洞察!我通过使用div来工作!谢谢你的帮助。 – jamcoupe 2012-01-07 15:41:38