Почему онклик выполняется без нажатия на него в javascript? - PullRequest
2 голосов
/ 06 февраля 2020

проблема : страница выполняет свойства javascript onclick до нажатия. вот мой код

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<script>
var x = document.getElementById("demo");
x.onclick = alert("clicked");
</script>
</body>
</html>

решение : когда я изменяю строку x.onclick = alert("clicked"); на x.onclick = function() {alert("clicked")};, это работает. Я хочу понять причину этого поведения onclick.

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

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

x.onclick = myMethod() // NOT working due to directly execution
x.onclick = () => myMethod() // working
x.onclick = myMethod // working
x.onclick = function() { myMethod() } // working 
0 голосов
/ 06 февраля 2020

Если вы пишете код таким способом, он работает также

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var x; 
x.onclick = alert("clicked");
</script>
</body>
</html>

ТАК, что ваш код не понимает, где вы пытаетесь отправить это предупреждение, поэтому автоматически отображается, так что это не очень хороший способ. Если вы пытаетесь отобразить предупреждение при нажатии на текст затем выполните этот метод

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
    <h1 id="demo" >Hello world!</h1>
<script>

document.getElementById('demo').onclick = function(){
    alert("clicked");
}
</script>
</body>
</html>
...