Javascript 拦截击倒单选按钮的点击

编辑以添加：

这是目前我唯一能让它工作的方法——我采用了“checked”绑定的ko实现，并制作了一些小mod。看起来有点重，当框架更新时容易崩溃，但是嘿，呵呵

---

我有一个单选按钮的集合，用一个击倒vm。如果用户试图更改选择，我希望首先向他们显示一个确认窗口（即“确定吗？”）

我成功地做到了这一点，但我对解决方案不满意——一个太复杂了，另一个在确认窗口出现时显示了两个单选按钮

我想截取点击，以便在UI（或可观察的支持）中的选择更改之前显示确认。我曾尝试使用mouseup或mousedown事件绑定，但我所做的任何事情都无法阻止在选择取消更改后进行选择

如果需要，是否可以拦截单击并阻止更改传播

js:

html:

---

既然您想改变敲除检查绑定的工作方式，我可能会使用bindingHandler对其进行定制，比如

<input type="radio" data-bind="radioWithConfirm: { selected: $parent.selectedOption }, value: $data"/>

ko.bindingHandlers.radioWithConfirm = {
  init: function(element, valueAccessor) {
    var options = valueAccessor();

    $(element).on('click', function(event) {
      if (!confirm('really?')) {
        event.preventDefault();
        return false;
      } else {
        options.selected(this.value);
        return true;
      }
    });
  }
}

ko.bindingHandlers.radioWithConfirm={
init：函数（元素、值访问器）{
var options=valueAccessor（）；
$（元素）。在（'单击'）上，函数（事件）{
如果（！确认（'真的？'））{
event.preventDefault（）；
返回false；
}否则{
选项.selected（此.value）；
返回true；
}
});
}
}

---

遗憾的是，它仍然面临双重选择问题。事实上，如果你选择“OK”，就有可能得到三重选择！试试这个。我想说的一点是，如果你想改变收音机的工作方式，我不认为最好的方法是覆盖敲除本机行为，而是在bindinghandler中解决它，并将敲除实现排除在外。这样更好，但当确认可见时，它仍然显示双重选择。我没有用我的工作版本覆盖敲除本机行为，它是一个自定义绑定，其中大部分是从本机检查绑定复制的。

<p>
<!-- ko foreach:checkboxOptions -->
<input type="radio" data-bind="event: {mouseup:$parent.showConfirm, click:null, mousedown:null}, value:$data,checked:$parent.selectedOption"/><span data-bind="text:$data"></span>
<!-- /ko -->
</p>
<p data-bind="text:selectedOption"></p>

<input type="radio" data-bind="radioWithConfirm: { selected: $parent.selectedOption }, value: $data"/>

ko.bindingHandlers.radioWithConfirm = {
  init: function(element, valueAccessor) {
    var options = valueAccessor();

    $(element).on('click', function(event) {
      if (!confirm('really?')) {
        event.preventDefault();
        return false;
      } else {
        options.selected(this.value);
        return true;
      }
    });
  }
}