Question

我正在尝试使用semantic-ui阻止从具有模式对话框的页面转移，但是，e.preventDefault（）似乎不起作用：

<!DOCTYPE html>
<html>
<head>
    <title>Modal Block HREF</title>

    <link rel="stylesheet" type="text/css" href="node_modules/semantic-ui/dist/semantic.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/semantic-ui/dist/semantic.min.js"></script>
</head>
<body>

<a class="dirty" href="http://www.microsoft.com">Microsoft</a>
<a class="dirty" href="http://www.google.com">Google</a>

<div id="confirmmodal" class="ui small modal">
    <div class="header">FIRST</div>
    <div class="content">
        <div class="left">
            The first of many interesting things
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancel
        </div>
        <div class="ui positive button">
            OK
        </div>
    </div>
</div>

<div id="savemodal" class="ui small modal">
    <div class="header">SECOND</div>
    <div class="content">
        <div class="left">
            The second of many interesting things
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancel
        </div>
        <div class="ui positive button">
            OK
        </div>
    </div>
</div>

<script type="text/javascript">
$('.dirty').on('click', function(e, t) {
    // This works...
    //if (confirm('Are you sure')) {
    //    console.log("allow transfer");
    //}
    //else {
    //    console.log("block transfer");
    //    e.preventDefault();
    //}

    // This does NOT work
    $('#confirmmodal')
        .modal({
            onApprove: function () {
                console.log("allow transfer");
            },
            onDeny: function () {
                console.log("prevent transfer");
                   e.preventDefault();
                }
            })
        .modal('show');
});
</script>
</body>
</html>

似乎发生的事情是在对话框出现之前立即响应链接，即使我快速点击“取消”，也没有任何区别。

Answer 1

您需要阻止第一次点击提交页面。使用以下

<script type="text/javascript">
    $('.dirty').on('click', function(e, t) {
        e.preventDefault(); 
        var href = $(this).attr("href");
        $('#confirmmodal') .modal({
            onApprove: function () {
                console.log("allow transfer"); 
                window.location = href;
            }, 
            onDeny: function () {
                console.log("prevent transfer");
            } 
        }) .modal('show'); 
    });
 </script>

semantic-ui忽略模态对话框中的e.preventDefault

1 个答案: