blocks|key|235108|text|尝试在onmouseover="mouseover()"中添加<p>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|235109|+++++++function+mouseover()+{
++++++++++++alert('Hello');
+++++++++}|code-block|syntax|javascript|235110|​|235111|<!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>|235112|235113|entityMap^0|3|P|V|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|O|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>try to add <code>onmouseover="mouseover()"</code> in <code>&lt;p&gt;</code></p>

<pre><code>       function mouseover() {
            alert('Hello');
         }
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;testing&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a&gt;dasdasd&lt;/a&gt;
    &lt;p id="k" onmouseover="mouseover()"&gt;as&lt;/p&gt;

    &lt;script type="text/javascript"&gt;
    	function mouseover() {
     alert('Hello');
     }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2457181|text|你需要把它放在像这样的函数里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2457182|​|2457183|<!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>|code-block|syntax|javascript|2457184|2457185|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You need to put it in a function like so.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;testing&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a&gt;dasdasd&lt;/a&gt;
    &lt;p id="k"&gt;as&lt;/p&gt;

    &lt;script type="text/javascript"&gt;
    	
     document.getElementById("k").onmouseover = function(){alert('Hello')};
     
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2457216|text|试试这个(用JQuery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2457217|​|2457218|$(document).ready(function(){
++++$("p").mouseover(function(){
++++++++alert("Hello");
++++});
});|code-block|syntax|javascript|2457219|<!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>|2457220|2457221|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try this (with JQuery):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $("p").mouseover(function(){
        alert("Hello");
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Move the mouse pointer over this paragraph.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2015010|text|属性onmouseover期望将一个函数赋给它，而不是分配表达式的计算值，在本例中是：alert("hello")。因此，当文档加载时，它计算该表达式并显示警报，然后将一个null值分配给onmouseover属性，这就是警报只显示一次的原因。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2015011|对于您的目标，您可以使用匿名函数将警报包装起来，并将其放入属性中。请检查下一个示例：|2015012|​|2015013|<!DOCTYPE+html>
<html>

<head>
++++<title>testing</title>
</head>

<body>
++++<a>dasdasd</a>
++++<p+id="k"+style="border:+1px+solid+red">as</p>

++++<script+type="text/javascript">
++++	
+++++document.getElementById("k").onmouseover+=+function()+{alert('Hello')};
+++++
++++</script>
</body>

</html>|code-block|syntax|javascript|2015014|2015015|entityMap^0|2|B|17|E|2E|4|2M|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

<p>The property <code>onmouseover</code> expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: <code>alert("hello")</code>. So when the document loads, it evaluate that expression and the alert is shown, then a <code>null</code> value is assigned to the <code>onmouseover</code> property, that is the reason the alert only shows once.</p>

<p>For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;testing&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a&gt;dasdasd&lt;/a&gt;
    &lt;p id="k" style="border: 1px solid red"&gt;as&lt;/p&gt;

    &lt;script type="text/javascript"&gt;
    	
     document.getElementById("k").onmouseover = function() {alert('Hello')};
     
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|235183|text|问题是，警报函数之后的()会在页面加载时引发函数调用，您将看到警报。调用匿名函数内部的函数，该函数将确保只有在事件(onmouseover)被触发时才会调用该函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|235184|​|235185|document.getElementById("k").onmouseover+=+function(){alert('Hello')};|code-block|syntax|javascript|235186|<a>dasdasd</a>
<p+id="k">as</p>|235187|235188|entityMap^0|B|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>The issue is, the <code>()</code> after the <em>alert</em> function causes the function invocation on page load and you see the <em>alert</em>. Call the function inside of an anonymous function which will ensure that the function will be called only when the <em>event (onmouseover)</em> is fired:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("k").onmouseover = function(){alert('Hello')};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a&gt;dasdasd&lt;/a&gt;
&lt;p id="k"&gt;as&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;testing&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a&gt;dasdasd&lt;/a&gt;
    &lt;p id="k"&gt;as&lt;/p&gt;

    &lt;script type="text/javascript"&gt;
    	
     document.getElementById("k").onmouseover=alert('Hello');
     
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


Onmouseover event is fired when not expected

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我当时正在学习javascript和实验鼠标事件。在这段代码中，当我通过一个警告框将鼠标放在元素上时，我试图操纵它。但是，问题是，即使鼠标不在元素上，也会显示警报框。​<!DOCTYPE html><html><head>    <title>testing</title></head><body>    <a>das...

问当未预期时触发Onmouseover事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当未预期时触发Onmouseover事件EN