Почему происходит размытие события размытия? Иногда вы не можете закрыть окно предупреждения - PullRequest
Новая
       12

Почему происходит размытие события размытия? Иногда вы не можете закрыть окно предупреждения

0 голосов
/ 06 ноября 2018

Я связываю событие blur с функцией showAlert в элементе table. Когда курсор покидает input, происходит событие blur, а функция showAlert запускается и появляется окно alert.

Иногда окно alert нельзя закрыть. Вы закрываете его, затем он снова всплывает, и вы закрываете его, и он все еще всплывает. Я сделал этот вывод после тестирования приведенной ниже веб-страницы с Chrome не менее 50 раз. Эта проблема не возникает каждый раз. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form action="" method="post">
<table>
    <tr>
        <td>goods1</td>
        <td><input type='text' name="goods1"></td>
    </tr>
    <tr>
        <td>goods2</td>
        <td><input type='text' name="goods2"></td>
    </tr>
</table>
</form>
<script>
ob = document.getElementsByTagName("table")[0]
function showAlert(event) {
    ob = event.target;
    alert(ob.tagName);
}
ob.addEventListener("blur", showAlert, true);
</script>
</body>
</html>

Пожалуйста, проверьте несколько раз, пока проблема не возникнет.

Видео проблемы с Chrome

У меня такая же проблема в Firefox.

Скриншот проблемы с Firefox

Если вы не установите флажок «Запретить этой странице создавать дополнительные диалоговые окна», просто нажмите «ОК», окно alert будет всплывать постоянно, навсегда.

Что вызывает это, и как я могу сделать этот код более надежным?

1 Ответ

0 голосов
/ 06 ноября 2018

С сообщением msg трудно работать, потому что оно останавливает браузер до тех пор, пока вы не щелкнете по нему, чтобы закрыть, что требует перемещения мыши, и. , , вместе с размытием, которое срабатывает, когда вы покидаете элемент (что происходит, когда вы щелкаете окно предупреждения ...) - это плохая комбинация.

Рекомендация: создайте простой DIV с position:fixed; top:0; left:25%; и вставьте свое сообщение в HTML для этого div, и подождите, пока пользователь щелкнет в любом месте страницы, чтобы закрыть его. Используйте это, чтобы заменить функцию оповещения, и вы будете намного счастливее.

Быстрая демонстрация с использованием jQuery (извиняюсь за использование jQuery, но у меня нет времени его переводить - это всего лишь пример, а не код для решения вашей проблемы) 

$('#mybutt').click(function(){
  var mymsg = "<i>Here is a sample message. Click on <b>me</b> to close.</i>";
  $('#msg').html(mymsg);
  $('#msg').show();
});

$('#nuther').click(function(){
  var mymsg = "<div id='nuth'>Here is another message. Click on <b>me</b> to close.</div>";
  $('#msg').html(mymsg);
  $('#msg').show();
});

$('#msg').click(function(){
  $('#msg').hide();
});
#msg{position:fixed;top:10%;left:25%;padding:10px;text-align:center;}
#msg{font-size:1.3rem;background:bisque;z-index:2;display:none;}

#nuth{color:dodgerblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg"></div>
<button id="mybutt">Click me</button>
<button id="nuther">Nuther button</button>
...