JavaScript - 事件 relatedTarget 不适用于 onClick-6ren

JavaScript - 事件 relatedTarget 不适用于 onClick

转载作者：行者123 更新时间：2023-11-29 23:16:13

25

4

当我仅将 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

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

提前谢谢你。

最佳答案

我修复了这两行以获得预期的结果:

"   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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52690453/

25

4

0

文章推荐： javascript - node js中的Web套接字服务器继承链

javascript - 如何跨浏览器使用 relatedTarget？
Firefox 支持 relativeTarget 来实现 focus/blur，但不支持 focusin/focusout 事件。 IE 仅支持 focusin/focusout，但不支持 fo
javascript - 事件对象总是有 relatedTarget undefined
bootstrap 事件为我们提供了 event.relatedTarget 里面的可用事件。我正在使用 shown.bs.modal。在正常情况下，event.relatedTarget 具有我们单
javascript - 模糊事件.relatedTarget 返回 null
我有一个字段，当该字段失去焦点时我需要清除它(这意味着用户单击了页面上的某个位置)。但有一个异常(exception)。当用户单击特定元素时，不应清除输入文本字段。我尝试使用event.relate
JavaScript - 事件 relatedTarget 不适用于 onClick
当我仅将 event.relatedTarget 用于 onClick 时出现错误，但它适用于 onMouseout。这是我的代码: #layer1 {
javascript - event.target 与 event.relatedTarget
我想知道 event.target 和 event.latedTarget 之间的区别。以下是拖放事件的代码块。 ondragleave: function (event) { // re
jquery 检索 relatedTarget.data ('url' )值
我需要从 event.latedTarget 检索 data-url 属性的值我尝试了很多方法: e.relatedTarget.data('url') e.relatedTarget.attr('
javascript - Bootstrap Modal - 无法从 relatedTarget 收集属性？
我有一个 PHP 循环，它创建一系列具有唯一数据属性的按钮。单击这些按钮时，它们会打开一个模式，该模式收集按钮上数据属性的值，并使用它们来预填充表单。可以在这里看到:https://getbootst
JavaScript FocusEvent relatedTarget 属性在 firefox 中不起作用
检查 provided article它是 w3school code for FocusEvent relatedTarget Property 代码示例，它在 Google chrome 中完美运
javascript - 如何在 IE 中使用 relatedTarget(或等效)？
显然 IE (11) 在 relatedTarget 方面存在问题，例如 blur 事件。 IE 是否有替代方法来获取 relatedTarget？这是一个在 IE 中产生错误的例子: https:
modal-dialog - Bootjack Modal生成异常:类 'TransitionEvent'没有实例getter 'relatedTarget'
我使用Rikulo / Bootjack在模态窗口中输入参数，但是dquery在DartEditor-1.10.1(Win7和Linux)中使用首选项生成了多个异常“类'TransitionEvent
javascript - SVG:relatedTarget.correspondingUseElement 在 IE 中未定义
我有以下 HTML 代码: ... X
javascript - 使用 Twitter Bootstrap 模式按钮时获取 e.relatedTarget
我编写了代码以在单击按钮时显示模态框，目的是在模态框内编辑按钮的文本。我的意图是有很多按钮，所以我不是通过 id 获取它们，而是在调用模式时使用 e.relatedTarget 以便知道调用了哪个按
javascript - e.target 和 e.relatedTarget 有什么区别？
当使用 jQuery on e.target 给我触发偶数的元素但是当使用 Bootstrap 模式时我通过 e.relatedTarget< 访问触发元素。我想了解它们有何不同。最佳答案某些事件
javascript - 为什么 Leaflet 不在 mouseout 事件中提供正确的 relatedTarget 元素？
当用户将鼠标悬停在标记上时，我会打开一个弹出窗口。目前，当用户将鼠标悬停在弹出窗口上时，弹出窗口会关闭(例如，用户无法选择弹出窗口内的文本，因为它会关闭)。我正在尝试解决此问题，并且找到了一个很好的方
javascript - jQuery mouseleave e.toElement || e.relatedTarget 不起作用
我正在尝试像在 Facebook 上一样制作用户悬停卡片。但我对以下代码有疑问: $('body').on('mouseleave', '.avatar', function(e) { var
javascript - 调用 onBlur 时 relatedTarget 在 Firefox 中为 null
我正在尝试创建一个帮助消息，当用户单击切换按钮以显示帮助消息或通过单击页面上的其他位置来单击离开时，该帮助消息将消失。解决方案似乎是查看 onblur 事件的 relatedTarget 属性，并防止

首页

博学

6Ren·AI

商城

JavaScript - 事件 relatedTarget 不适用于 onClick