Question

我正在学习javascript并尝试鼠标事件。在这段代码中，当我将鼠标放在警报框的帮助下时，我试图操纵该元素。但是问题是，即使鼠标不在元素上，也会显示警报框。

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover=alert('Hello');
     
    </script>
</body>

</html>

Answer 1

尝试在onmouseover="mouseover()"中添加<p>

       function mouseover() {
            alert('Hello');
         }

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k" onmouseover="mouseover()">as</p>

    <script type="text/javascript">
    	function mouseover() {
     alert('Hello');
     }
    </script>
</body>

</html>

Answer 2

您需要将其放入这样的函数中。

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover = function(){alert('Hello')};
     
    </script>
</body>

</html>

Answer 3

属性\"希望您为其分配一个函数，而不是分配一个表达式的求值，在这种情况下为\\。因此，当文档加载时，它将评估该表达式并显示警报，然后将onmouseover值分配给alert("hello")属性，这就是警报仅显示一次的原因。

对于您的目标，您可以使用匿名函数来包装警报并将其添加到属性。检查下一个示例：

null

Answer 4

问题是 alert 函数之后的()导致页面加载时调用该函数，您会看到 alert 。在匿名函数内部调用该函数，以确保仅在触发事件（onmouseover）时调用该函数：

document.getElementById("k").onmouseover = function(){alert('Hello')};

<a>dasdasd</a>
<p id="k">as</p>

Answer 5

尝试此操作（使用JQuery）：

$(document).ready(function(){
    $("p").mouseover(function(){
        alert("Hello");
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

意外触发Onmouseover事件

5 个答案: