渲染鼠標位置使用document.write對象

Question

在下面的代碼，

 <script> 
      var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 
      if(!mie){ 
       document.captureEvents(Event.MOUSEMOVE); 
      } 
      document.onmousemove = mousePos; 

      var mouseX = 0; 
      var mouseY = 0; 

      function mousePos(e){ 
       if(!mie){ 
        mouseX = e.pageX; 
        mouseY = e.pageY; 
       } 
       else{ 
        mouseX = e.clientX + document.body.scrollLeft; 
        mouseY = e.clientY + document.body.scrollRight; 
       } 

       /*document.formex.mousex.value = mouseX; 
       document.formex.mousey.value = mouseY;*/ 
       document.write("X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date());  
       return true; 
      } 
    </script> 

---

期望輸出是呈現用於在移動每鼠標位置的每個新條目。

我只能使用document.write對象呈現一個鼠標位置。有更好的方法來渲染嗎？

Answer 1

document.writeclears the document，所有的事件處理程序裏面

試試這個，而不是

<script> 
      var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 
      if(!mie){ 
       document.captureEvents(Event.MOUSEMOVE); 
      } 
      document.onmousemove = mousePos; 

      var mouseX = 0; 
      var mouseY = 0; 

      function mousePos(e){ 
       if(!mie){ 
        mouseX = e.pageX; 
        mouseY = e.pageY; 
       } 
       else{ 
        mouseX = e.clientX + document.body.scrollLeft; 
        mouseY = e.clientY + document.body.scrollRight; 
       } 

       /*document.formex.mousex.value = mouseX; 
       document.formex.mousey.value = mouseY;*/ 
       document.write("X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date());  
document.onmousemove = mousePos; 
       return true; 
      } 
    </script> 

觀察return true之前添加到事件再次綁定新的聲明。

或只是如果要追加然後做

document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date() + " </br>"; 

Answer 2

不要使用文件撰寫改用innerHTML的使用該行，而不是document.write（禮貌@湯姆）

document.body.innerHTML = "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date(); 

。請參閱演示鏈接。

 var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false; 
     if(!mie){ 
      document.captureEvents(Event.MOUSEMOVE); 
     } 
     document.onmousemove = mousePos; 

     var mouseX = 0; 
     var mouseY = 0; 

     function mousePos(e){ 
      if(!mie){ 
       mouseX = e.pageX; 
       mouseY = e.pageY; 
      } 
      else{ 
       mouseX = e.clientX + document.body.scrollLeft; 
       mouseY = e.clientY + document.body.scrollRight; 
      } 


      document.body.innerHTML = "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date();  
      return true; 
     } 

Demo

感謝，

阿肖克