代码之家  ›  专栏  ›  技术社区  ›  showkey

为什么代码不健壮:有时您永远无法关闭警报窗口?

  •  0
  • showkey  · 技术社区  · 6 年前

    我把绳子绑起来 blur 事件到 showAlert 元素中的函数 table input 模糊 事件发生并且 显示警报 函数运行并弹出 alert 窗户。

    有时 警觉的

    <!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>
    

    请测试几次直到问题发生。

    Video of the problem with Chrome

    我在火狐也遇到同样的问题。

    Screenshot of the problem with Firefox

    如果您没有选中“阻止此页创建其他对话框”框,只需单击“确定”即可 窗口会不断弹出,永远。

    是什么导致了这种情况,我如何才能使这段代码更健壮?

    1 回复  |  直到 6 年前
        1
  •  0
  •   cssyphus    6 年前

    警报消息很难使用,因为它会冻结浏览器,直到您单击它关闭,这需要您移动鼠标,然后。再加上blur,当你离开元素时会触发(当你点击警告框时会触发…),这是一个糟糕的组合。

    建议:创建一个简单的DIV position:fixed; top:0; left:25%; 并将您的消息插入到该div的HTML中,等待用户单击页面上的任意位置以关闭它。用这个来代替提醒功能,你会更快乐。

    $('#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>