javascript - 禁用复选框( Material 灯)检查

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+ 中不起作用？

复选框正在检查(

值(value)正在改变...

是否可以停止对该元素的任何更改和检查？

笨蛋:https://plnkr.co/edit/CCQaBOntmQ4eWh0RUJ5Q?p=preview

Answer 1

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

为什么你会看到这个

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

基本上，在 Chrome 中(我假设是 FF)，在调用 onclick 函数后发生将复选框更改为视觉上“已选中”的图形更新。然而在 IE 中，图形更改首先完成，然后 然后 调用 onclick 事件，这就是为什么你的 preventDefault() 和 stopPropogation() 调用无所事事——这时马已经逃跑了。您可以通过在 evt = evt || 之前的绑定(bind)函数的开头添加警报来亲眼看到这一点window.event:在 Chrome 中该框仍未选中，在 IE 中已经太晚了。

你能做什么？

这里有点复杂。使用 ng-disabled 及其同类产品只是一个选项，如果您对单击复选框时不会触发操作感到高兴，我认为这不是您想要的。

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

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

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

解决方案

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

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

focusin 在元素即将获得焦点(即被单击)时被调用。它并不完美，就好像用户在复选框上点击它会选中它一样，但我发现使用点击事件对我不起作用。可能有更好的事件可供使用，或者您可能知道使点击事件起作用的方法。最坏的情况是，如果我们当前按下了 Tab 键，您总是可以让函数退出而没有任何效果。

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