禁用复选框(素材灯)检查

Question

在我的应用程序中,我正在使用Google Material Light库.

我不想检查我的输入(直到某些逻辑是正确的),这就是我添加这样的指令的原因:

app.directive('updLink', function () {
    return {
      restrict: 'EA',
        link: function(scope, element) {
          element.bind('click', function(evt) {
            evt = evt || window.event;
            evt.preventDefault();
            evt.stopPropagation();
            evt.returnValue = false;
            return false;
          });
        }
      };
  });

和我的HTML:

  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="123">
      <input type="checkbox" id="123" class="mdl-checkbox__input"  ng-model="user" upd-link>
  </label>

为什么要阻止这个指令不起作用IE10+？

复选框正在检查(

价值在变化......

是否可以停止任何更改并检查此元素？

plunker:https://plnkr.co/edit/CCQaBOntmQ4eWh0RUJ5Q ？ p = preview

Answer 1

如果您只是对如何执行此操作感兴趣，请跳到最后。如果您想了解为什么会遇到这些麻烦，请继续阅读！

为什么你会看到这个

值得注意的是，您看到此情况的原因是 IE 中的事件顺序与其他浏览器中的不同。

基本上，在 Chrome（我认为是 FF）中，将复选框更改为视觉上“选中”的图形更新发生在调用 onclick 函数之后。然而，在 IE 中，首先完成图形更改，然后调用onclick 事件，这就是为什么您的preventDefault()和stopPropogation()调用没有执行任何操作 - 此时马已经逃跑了。您可以通过在绑定函数的开头添加一个警报来亲自查看这一点evt = evt || window.event：在 Chrome 中，该框仍未选中，在 IE 中已经为时已晚。

你能做什么？

这就是事情变得有点复杂的地方。如果您很高兴单击复选框时不会触发某个操作，那么使用ng-disabled及其同类只是一个选项，我认为这不是您想要的。

这样做的结果是，我认为您无法采取任何措施来阻止在 IE 中检查复选框的复选框元素上触发实际的单击事件。如果您想停止选中该框，但单击复选框的操作会导致发生某些情况，您将需要执行以下任一操作：

1. 以某种方式拦截点击，使其永远不会真正击中元素。
2. 做一些事情来取消点击行为。

选项 1 有点棘手并且容易出错。我使用SetCapture取得了一些成功，但有点不一致。值得庆幸的是，选项 2 提供了一个更简单的解决方案。

解决方案

不要拦截点击，不要停止传播，只需自己选中该框，以便点击事件中的第二个“选中”再次取消选中它。最终结果是用户的框保持未选中状态，并且您可以在单击事件后面触发任何您想要的功能：

element.bind('focusin', function() {
  this.checked=true;
});

focusin当元素即将获得焦点（即被单击）时调用。它并不完美，就像用户点击复选框会检查它一样，但我发现使用单击事件对我不起作用。可能有更好的事件可以使用，或者您可能知道一种让点击事件发挥作用的方法。最坏的情况是，如果当前按下 Tab 键，您始终可以让函数退出而不会产生任何效果。

我已经在 IE11 和 Chrome 中尝试过了，两者似乎都按预期工作。