JavaScript

Question

当我仅将 event.relatedTarget 用于 onClick 时出现错误，但它适用于 onMouseout。

这是我的代码：

<html>
  <head>
    <style type="text/css">
      #layer1 {
        width: 370px;
        height: 220px;
        background-color: yellow;
      }
      #layer2 {
        position: relative;
        width: 130px;
        height: 47px;
        top: 10px;
        left: 10px;
        background-color: #CC0066;
      }
      #layer3 {
        position: relative;
        width: 200px;
        height: 100px;
        top: 10px;
        left: 150px;
        background-color: #334466;
      }

      #button1 {
        position: relative;
        top: 4px;
        left: 4px;
      }

      #button2 {
        position: relative;
        top: 4px;
        left: 4px;
      }
    </style>
  <body>
   <div id="layer1">
    <div id = "layer2">
      <input type="submit" id = "button1" value="Button 1 (onclick)"></input>
    </div>
    <div id = "layer3">
      <input type="submit" id = "button2" value="Button 2 (onmouseout)"></input>
    </div>
   </div>
   <script type="text/javascript">
    document.getElementsByTagName("body")[0].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("div")[0].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("div")[1].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("input")[0].addEventListener("click", function() {print(event);}, false);

    document.getElementsByTagName("div")[2].addEventListener("mouseout", function() {print(event);}, false);
    document.getElementsByTagName("input")[1].addEventListener("mouseout", function() {print(event);}, false);
    function print(elem) {
        alert("JavaScript alert\n\n" +
            "Element\n" + 
            "   Type: " + elem.relatedTarget.tagName + 
            "\n   Id: " + elem.relatedTarget.id +
            "\nEvent's name: " + elem.type +
            "\nMouse's coordinates" + 
            "\n   Screen: " + elem.screenX + ", " + elem.screenY +
            "\n   Window: " + elem.clientX + ", " + elem.clientY +
            "\n   HTML item: " + elem.offsetX + ", " + elem.offsetY);
    }
   </script>
  </body>
</html>

点击项目时出错：https://i.imgur.com/XKX2oaU.png

不过，使用 mouseout 它可以正常工作：https://i.imgur.com/nmFGKkI.png

我不明白哪里出了问题，因为我使用的是相同的功能，它只是改变了事件的类型。

提前致谢。

Answer 1

为了收到预期的结果，我修复了这两行：

"   Type: " + elem.target.nodeName +
"\n   Id: " + elem.target.getAttribute("id") +

希望这对您有所帮助

document.getElementsByTagName("body")[0].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("div")[0].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("div")[1].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("input")[0].addEventListener("click", function() {
  print(event);
}, false);

document.getElementsByTagName("div")[2].addEventListener("mouseout", function() {
  print(event);
}, false);
document.getElementsByTagName("input")[1].addEventListener("mouseout", function() {
  print(event);
}, false);

function print(elem) {
  alert("JavaScript alert\n\n" +
    "Element\n" +
    "   Type: " + elem.target.nodeName +
    "\n   Id: " + elem.target.getAttribute("id") +
    "\nEvent's name: " + elem.type +
    "\nMouse's coordinates" +
    "\n   Screen: " + elem.screenX + ", " + elem.screenY +
    "\n   Window: " + elem.clientX + ", " + elem.clientY +
    "\n   HTML item: " + elem.offsetX + ", " + elem.offsetY);
}

#layer1 {
  width: 370px;
  height: 220px;
  background-color: yellow;
}

#layer2 {
  position: relative;
  width: 130px;
  height: 47px;
  top: 10px;
  left: 10px;
  background-color: #CC0066;
}

#layer3 {
  position: relative;
  width: 200px;
  height: 100px;
  top: 10px;
  left: 150px;
  background-color: #334466;
}

#button1 {
  position: relative;
  top: 4px;
  left: 4px;
}

#button2 {
  position: relative;
  top: 4px;
  left: 4px;
}

<html>

<head>

  <body>
    <div id="layer1">
      <div id="layer2">
        <input type="submit" id="button1" value="Button 1 (onclick)"></input>
      </div>
      <div id="layer3">
        <input type="submit" id="button2" value="Button 2 (onmouseout)"></input>
      </div>
    </div>
  </body>

</html>

JavaScript - 事件 relatedTarget 不适用于 onClick

JavaScript - event relatedTarget is not working for onClick

event-listener

onmouseclick