在 <a> 元素上使用 onclick答案

【问题标题】：Using onclick on an <a> element在 <a> 元素上使用 onclick
【发布时间】：2016-12-20 14:28:33
【问题描述】：

我有一个包含 href 属性的 a 元素。单击它会删除数据，因此我希望用户确认该操作。 href 属性是指一个 php 文件，其中包含将在 GET 参数中删除的数据的 id。我添加了一个 onclick 属性，它应该执行以下 JS（它显示了一个要求确认的语义 UI 模式）：

    confirmmodal = function () {
    beforeunload = function () {
        $('.ui.basic.modal')
            .modal({
                closable: false,
                onDeny: function () {
                    return false;
                },
                onApprove: function () {
                    return true;
                }
            })
            .modal('show')
        ;
}
}

但是当我运行它时，它仍然会转到将删除数据的页面（虽然我还没有构建它，所以什么都没有被删除）。是否有一个选项以某种方式赋予 onclick 属性优先于 href 属性？

【问题讨论】：

你用什么modal，什么jQuery插件，后面是什么html代码？你怎么称呼模态？请提供所有必需的代码。
How to stop default link click behavior with jQuery 的可能重复项。而且您需要在回调之外执行此操作，因此请使用 prevent default。
为什么你不能让链接的 href 指向并触发模态窗口，而确认模态要么包含指向其他页面的链接，要么触发对该页面执行 AJAX 调用的函数?这样，页面中的删除链接不会导致删除操作，并且可以在不触发删除的情况下关闭模式 - 或者如果点击“确认”，它可以允许删除操作发生。

标签： javascript html

【解决方案1】：

您需要在代码末尾添加event.preventDefault()。

例如：

<a href="somePage.php" onclick="showDialog(event)">Delete</a>



function showDialog(e) {
    // custom code to show dialog here
    e.preventDefault();
}

【讨论】：

【解决方案2】：

好的，我对脚本进行了一些调整，并考虑了 gavgrif 的评论。

我让<a> 元素有点不同，所以它不再包含 href 属性：

<a title="Delete post"  onclick="confirmmodal(this)" data-postid="'. $row['postnr'] .'"><i class="large delete middle aligned icon"></i></a>

现在，如果点击图标，则postid也可用于JS，所以我们可以在点击确认按钮时在GET参数中引用它：

confirmmodal = function (a) {
    $('.ui.basic.modal')
        .modal({
            closable: false,
            onDeny: function () {
                return true;
            },
            onApprove: function () {
                window.location.href = "deletepost.php?id=" + a.dataset.postid
                return true;
            }
        })
        .modal('show')
    ;
}

这是一个半丑陋的修复，但不是那么多行，而且我不知道关于 JQuery 的 s*** :)

感谢所有帮助，我几乎使用preventDefault() 到达那里，但如果操作得到确认，我将无法继续，所以这是一个更简单的解决方案。

【讨论】：