如何让点击TextField以外的任何地方，使其松散焦点？

document.addEventListener('click', function(event) {
  var textField = document.getElementById('myTextField'); // 替换为实际的TextField元素
  var target = event.target;
  if (target !== textField) {
    textField.blur();
  }
});

var container = document.getElementById('container'); // 替换为实际的容器元素
container.addEventListener('click', function(event) {
  var textField = document.getElementById('myTextField'); // 替换为实际的TextField元素
  var target = event.target;
  if (target !== textField) {
    textField.blur();
  }
});

<style>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9999;
  }
</style>

<div id="container">
  <input type="text" id="myTextField">
  <div class="mask"></div>
</div>

<script>
  var mask = document.querySelector('.mask');
  mask.addEventListener('click', function() {
    var textField = document.getElementById('myTextField'); // 替换为实际的TextField元素
    textField.blur();
  });
</script>