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節點的內容。