Моя кнопка не будет отменена после нажатия кнопки "Отмена" в моем всплывающем окне

#javascript

Вопрос:

У меня есть кнопка, которая действует как ссылка. Onclick — это функция myAlert(), показанная ниже. Функция создает всплывающее окно с вопросом, хотите ли вы продолжить. Он все равно переходит на следующую страницу, даже если вы нажмете «отмена». Что мне делать?

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body bgcolor="grey" align="center">
<a href="333.html"><button onclick="myAlert()">Sign up</button></a><a href="22.html"><button >Log in</button></a> 

<script>
    function myAlert(){
        if (confirm('Are you sure you want to sign up?')) {

  console.log('Thank you.');
} else {


}
    }
    </script>       
            
  
    </body>
</html>

Развернуть фрагмент

Ответ №1:

Вы разместили кнопку внутри самой ссылки. Поэтому после закрытия диалогового окна браузер обрабатывает событие onclick ссылки, что приводит к переходу к цели ссылки.

Вы можете полностью удалить элементы ссылок и обрабатывать все с помощью кнопок:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body bgcolor="grey" align="center">
<button onclick="myAlert('333.html')">Sign up</button><button onclick="window.location.href='22.html'">Log in</button> 

<script>
    function myAlert(redirect){
        if (confirm('Are you sure you want to sign up?')) {
           window.location.href=redirect
  console.log('Thank you.');
} else {


}
    }
    </script>       
            
  
    </body>
</html>

Развернуть фрагмент

Ответ №2:

Используйте preventDefault() метод, чтобы отменить действие по умолчанию, относящееся к переходу на следующую страницу.

 function myAlert(e) {
  
  if (confirm('Are you sure you want to sign up?')) {

    console.log('Thank you.');
  } else {
     e.preventDefault();
  }
}

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="grey" align="center">
  <a href="333.html"><button onclick="myAlert(event)">Sign up</button></a><a href="22.html"><button >Log in</button></a>


</body>

</html>

Развернуть фрагмент