javascript - 为什么即使按下取消，onclick 事件仍然会转到 url？

Question

我有一个具有onclick 功能的链接

<a onclick="return confirm('Are you sure you want to delete this item?');"
        href="#"
        data-bind="ifnot: ($data.borrowed_amount > 0 || $data.status == 0), click: $root.deleteMoneyBorrowed">
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>

当我点击它时，它显示“你确定要删除吗”但是当我按取消时它仍然继续删除，如果我按取消不知道如何停止删除。

Answer 1

您有 2 个事件绑定(bind)到 <a>标签。一个事件是默认的 onclick 事件，另一个事件是您设置为通过 knockout 绑定(bind)到项目。您需要有一个绑定(bind)事件。

在此甚至您创建了确认。然后，如果确认等于true，处理delete方法。

因此，直接删除 onclick 属性。在 deleteMoneyBorrowed 函数中，

if(window.confirm('...')) {
    deleteMoneyBorrowed();
    console.log('user confirmed');
} else {
    console.log('user cancelled');
}

此外，最好将类定义移动到父级 <a> 的范围内并删除跨度。

<a href="#" class="glyphicon glyphicon-trash" aria-hidden="true" 
    data-bind="ifnot: ($data.borrowed_amount > 0 || $data.status == 0),
    click: $root.deleteMoneyBorrowed"></a>

以 fiddle 为例:https://jsfiddle.net/vk4nzo05/