JavaScript - событие, относящееся к цели, не работает для onClick - PullRequest
Новая
       39

JavaScript - событие, относящееся к цели, не работает для onClick

0 голосов
/ 07 октября 2018

Я получаю сообщение об ошибке, когда использую 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

Хотя с мышью это работает правильно: https://i.imgur.com/nmFGKkI.png

Я не понимаю, что не так, поскольку я использую ту же функцию, она только меняетсятип мероприятия.

Заранее спасибо.

1 Ответ

0 голосов
/ 07 октября 2018

Я исправил эти две строки, чтобы получить ожидаемые результаты: 

"   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>
...