如何在Javascript中打印点击事件答案

【问题标题】：How to print click events in Javascript如何在Javascript中打印点击事件
【发布时间】：2016-10-19 10:36:39
【问题描述】：

 <body>

  <button id ="b1">BUTTON</button>
  </br>
  <p id="text"> </p> 

  <script type="text/javascript">

   document.getElementById("b1").onmouseout = reset_button;
   document.getElementById("b1").onmousedown = mousedown_button;
   document.getElementById("b1").onmouseover = mouse_over;
   document.getElementById("b1").onmousemove = mouse_move;
   document.getElementById("b1").onclick = click_button;


   function reset_button() {
    document.getElementById("text").innerHTML = 
    "mouseout";
   }
   function mousedown_button() {
    document.getElementById("text").innerHTML = 
   "mousedown";
   }
   function click_button() {
    document.getElementById("text").innerHTML = 
    "click";
   }
   function mouse_over() {
    document.getElementById("text").innerHTML =
    "mouseover";
   }
   function mouse_move() {
    document.getElementById("text").innerHTML =
    "mousemove";
   }

   </script>
  </body>

当我按下按钮时，我想打印 mouseout、mousedown、mouseover、mousemove 和 onlick。但是，我制作的这段代码只打印 mouseover、mousedown 和 mouseout。有人可以解释哪一部分是错误的以及如何解决它吗？

【问题讨论】：

尝试使用console.log('name') 而不是innerHTML，因为它可能被调用只是被覆盖但其他东西。 Console.log 将附加到控制台，因此您将能够看到所有内容。
把 console.log('your event');在你的函数中
谢谢你的例子。我很高兴看到 JS 与 HTML 必要分离的最终演示。
哦，我不知道控制台方法。谢谢：）

标签： javascript html events button onclick

【解决方案1】：

您的文本被覆盖，请在此处查看控制台输出：

更新：简化代码

（向小外星人致敬）

['mouseout', 'mousedown', 'mouseover', 'mousemove', 'click'].forEach(
    ev_name =>b1.addEventListener(ev_name, e => console.log(ev_name)))

&lt;button id="b1"&gt;BUTTON&lt;/button&gt;

【讨论】：

【解决方案2】：

这是您尝试执行的操作的简明版本。只需 3 行代码。

['mouseout', 'mousedown', 'mouseover', 'mousemove', 'click'].forEach(
    ev_name =>b1.addEventListener(ev_name, e => b1.innerHTML += " " + ev_name))

&lt;button id="b1"&gt;click me&lt;/button&gt;

【讨论】：

我喜欢你的方法并相应地更新了我的答案

【解决方案3】：

mousemove 和 mouseover 事件相互干扰尝试移除 mousemove 事件。

  <body>

  <button id ="b1">BUTTON</button>
  </br>
  <p id="text"> </p> 

  <script type="text/javascript">
   document.getElementById("b1").onclick = click_button;
   document.getElementById("b1").onmouseout = reset_button;
   document.getElementById("b1").onmousedown = mousedown_button;
   document.getElementById("b1").onmouseover = mouse_over;




   function reset_button() {
    document.getElementById("text").innerHTML = 
    "mouseout";
   }
   function mousedown_button() {
    document.getElementById("text").innerHTML = 
   "mousedown";
   }
   function click_button() {
    document.getElementById("text").innerHTML = 
    "click";
   }
   function mouse_over() {
    document.getElementById("text").innerHTML =
    "mouseover";
   }

   </script>
  </body>

【讨论】：