Событие Onmouseover запускается, когда не ожидается - PullRequest
Новая
       10

Событие Onmouseover запускается, когда не ожидается

0 голосов
/ 06 декабря 2018

Я изучал 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>

Ответы [ 5 ]

0 голосов
/ 06 декабря 2018

Проблема в том, что () после функции alert вызывает вызов функции при загрузке страницы, и вы видите предупреждение .Вызовите функцию внутри анонимной функции, которая будет гарантировать, что функция будет вызываться только при возникновении события (onmouseover) : 

document.getElementById("k").onmouseover = function(){alert('Hello')};
<a>dasdasd</a>
<p id="k">as</p>
0 голосов
/ 06 декабря 2018

Свойство onmouseover ожидает, что вы передаете ему функцию, а не присваиваете оценку выражения, в данном случае: alert("hello").Поэтому, когда документ загружается, он оценивает это выражение и отображается предупреждение, а затем onmouseover присваивается значение null, поэтому предупреждение отображается только один раз.

Для вашей целиВы можете использовать анонимную функцию, чтобы обернуть предупреждение и передать его свойству.Проверьте следующий пример: 

<!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>
0 голосов
/ 06 декабря 2018

Вы должны поместить его в функцию, подобную этой. 

<!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>
0 голосов
/ 06 декабря 2018

Попробуйте это (с 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>
0 голосов
/ 06 декабря 2018

попробуйте добавить 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>
...