Question

好的，如果您尝试使用Internet Explorer进行这种操作，则每次单击复选框时，控制台都会触发true，因为ie即即将在click之后触发change事件事件。

因此，如果将.prop('checked',false)更改为true，它将正常工作（因为读取了订单事件）

var checkd = false;

$('input[type=checkbox]').on('change', function() {
  checkd = this.checked;
  console.log($(this).prop('checked'));
});

$('body').on('click', function() {
  if (checkd) {
    $('input[type=checkbox]').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox'>

如您所见，控制台每次都会显示true，即由于body.click事件而立即将checked属性设置为false。

Answer 1

问题是由于事件执行的顺序引起的。在Edge中，即使单击了复选框，click上的body还是最先出现的。在Chrome浏览器和其他（好的）浏览器中，复选框上的click和change会先触发，然后沿DOM向上传播到body。

要解决此问题，使其可以跨浏览器工作，您将需要检查body click事件以查看单击的元素是什么。如果不是复选框，则可以取消选中它：

var checkd = false;

$('input[type=checkbox]').on('change', function(e) {
  checkd = this.checked;
  console.log($(this).prop('checked'));
});

$('body').on('click', function(e) {
  if (e.target.tagName !== 'INPUT' && checkd) {
    $('input[type=checkbox]').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox'>

每次单击边缘时，复选框选中的属性都设置为true

1 个答案: