Question

我已经习惯了这一段时间，但它不会起作用，我无法弄清楚原因。请帮忙。这就是我所拥有的：

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function clear() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

鼠标悬停工作并在div中显示文本，但当我将鼠标移出h1标签时，文本停留在那里，我不知道为什么，帮助将不胜感激。

Answer 1

问题似乎是全局符号clear已在使用中，并且您的功能无法覆盖它。如果您将该名称更改为其他名称（我使用blah），它可以正常工作：

直播：Version using clear which fails | Version using blah which works

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function blah() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

这是基本原则的一个很好的例证：尽可能避免全局变量。浏览器中的全局命名空间令人难以置信地拥挤，当发生冲突时，你会得到像这样的奇怪错误。

这样做的必然结果是不使用旧式onxyz=...属性来挂钩事件处理程序，因为它们需要全局变量。相反，至少使用代码来解决问题：Live Copy

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 id="the-header">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
      // Scoping function makes the declarations within
      // it *not* globals
      (function(){
        var header = document.getElementById("the-header");
        header.onmouseover = function() {
          go('The dog is in its shed');
        };
        header.onmouseout = clear;

        function go(what) {
          document.getElementById("goy").innerHTML = what;
        }
        function clear() {
          document.getElementById("goy").innerHTML = "";
        }
      })();
    </script>
</body>
</html>

...甚至更好，在IE8及更早版本上使用DOM2的addEventListener（或attachEvent），这样你就可以为元素上的事件提供多个处理程序。

Answer 2

Hallo Test Test

更快以前

const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

Answer 3

不幸的是，h1标签没有收到onmouseout事件。

下面的简单Javascript代码段适用于所有元素，并且仅使用1个鼠标事件。

请注意：“代码段中的边框用于提供元素的视觉分界。”

document.body.onmousemove = function(){ move("The dog is in its shed"); };

document.body.style.border = "2px solid red";
document.getElementById("h1Tag").style.border = "2px solid blue";

function move(what) {
    if(event.target.id == "h1Tag"){ document.getElementById("goy").innerHTML = "what"; } else { document.getElementById("goy").innerHTML = ""; }
}

<h1 id="h1Tag">lalala</h1>
<div id="goy"></div>

这也可以通过在h1标记中添加悬停选择器css属性在纯CSS中完成。

Answer 4

看看这个。使用jQuery的简洁解决方案。

http://jsfiddle.net/ma2Yd/

    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>


    <script type="text/javascript">

    $(function() {
       $("h1").on('mouseover', function() {
          $("#goy").text('The dog is in its shed');
       }).on('mouseout', function() {
          $("#goy").text("");
       });
   });

如何清除内部HTML

4 个答案: