JavaScript-事件关联目标不适用于onClick_Javascript_Event Listener_Onmouseclick

JavaScript-事件关联目标不适用于onClick

javascript

JavaScript-事件关联目标不适用于onClick,javascript,event-listener,onmouseclick,Javascript,Event Listener,Onmouseclick,当我仅对onClick使用event.relatedTarget时，我遇到了一个错误，但是它对onMouseout很有效这是我的代码： <html> <head> <style type="text/css"> #layer1 { width: 370px; height: 220px; background-color: yellow; } #layer2 {

当我仅对onClick使用event.relatedTarget时，我遇到了一个错误，但是它对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>


#第1层{
宽度：370px；
高度：220px；
背景颜色：黄色；
}
#第二层{
位置：相对位置；
宽度：130px；
高度：47px；
顶部：10px；
左：10px；
背景色：#CC0066；
}
#第3层{
位置：相对位置；
宽度：200px；
高度：100px；
顶部：10px；
左：150px；
背景色：#334466；
}
#按钮1{
位置：相对位置；
顶部：4px；
左：4px；
}
#按钮2{
位置：相对位置；
顶部：4px；
左：4px；
}
document.getElementsByTagName（“正文”）[0]。addEventListener（“单击”，函数（）{print（event）；}，false）；
document.getElementsByTagName（“div”）[0]。addEventListener（“单击”，函数（）{print（event）；}，false）；
document.getElementsByTagName（“div”）[1]。addEventListener（“单击”，函数（）{print（event）；}，false）；
document.getElementsByTagName（“输入”）[0]。addEventListener（“单击”，函数（）{print（event）；}，false）；
document.getElementsByTagName（“div”）[2].addEventListener（“mouseout”，function（）{print（event）；}，false）；
document.getElementsByTagName（“输入”）[1]。addEventListener（“mouseout”，function（）{print（event）；}，false）；
功能打印（elem）{
警报（“JavaScript警报\n\n”+
“元素\n”+
类型：“+elem.relatedTarget.tagName+
“\n Id:”+elem.relatedTarget.Id+
“\n事件名称：”+elem.type+
“\n用户坐标”+
\n屏幕：“+elem.screenX+”，“+elem.screenY”+
\n窗口：“+elem.clientX+”，“+elem.clientY”+
“\n HTML项：“+elem.offsetX+”，“+elem.offsetY”）；
}

单击项目时出错：

尽管有了mouseout，它仍能正常工作：

我不明白哪里出了问题，因为我使用的是相同的函数，它只会更改事件的类型

提前谢谢。

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

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

希望这能有所帮助

document.getElementsByTagName（“正文”）[0]。addEventListener（“单击”，函数（）{
印刷（活动）；
}，假）；
document.getElementsByTagName（“div”）[0]。addEventListener（“单击”，函数（）{
印刷（活动）；
}，假）；
document.getElementsByTagName（“div”）[1]。addEventListener（“单击”，函数（）{
印刷（活动）；
}，假）；
document.getElementsByTagName（“输入”）[0]。addEventListener（“单击”，函数（）{
印刷（活动）；
}，假）；
document.getElementsByTagName（“div”）[2]。addEventListener（“mouseout”，function（））{
印刷（活动）；
}，假）；
document.getElementsByTagName（“输入”）[1]。addEventListener（“鼠标输出”，函数（）{
印刷（活动）；
}，假）；
功能打印（elem）{
警报（“JavaScript警报\n\n”+
“元素\n”+
类型：“+elem.target.nodeName”+
“\n Id:”+elem.target.getAttribute（“Id”）+
“\n事件名称：”+elem.type+
“\n用户坐标”+
\n屏幕：“+elem.screenX+”，“+elem.screenY”+
\n窗口：“+elem.clientX+”，“+elem.clientY”+
“\n HTML项：“+elem.offsetX+”，“+elem.offsetY”）；
}

#第1层{
宽度：370px；
高度：220px；
背景颜色：黄色；
}
#第二层{
位置：相对位置；
宽度：130px；
高度：47px；
顶部：10px；
左：10px；
背景色：#CC0066；
}
#第3层{
位置：相对位置；
宽度：200px；
高度：100px；
顶部：10px；
左：150px；
背景色：#334466；
}
#按钮1{
位置：相对位置；
顶部：4px；
左：4px；
}
#按钮2{
位置：相对位置；
顶部：4px；
左：4px；
}

请添加

JavaScript

和

HTM:

代码。JavaScript代码已经存在，请查看我的代码。我只在一个文件中包含JavaScript、HTML和CSS代码我很高兴听到这个消息！