javascript - 为什么 event.target 在简单的单击事件处理程序有效时不会触发以下代码？

Question

下面是代码

(function(window){
  
  var form = document.getElementById('form_element'),
      form2 = document.getElementById('form_element2'),
      container = document.getElementById('container');
  
  window.addEventListener('mouseup', getAlert);
  
  function getAlert(event) {
    if(event.target === form) {
      alert('I clicked on a form');
    }
  }
  
  form2.addEventListener('click', function() {
    container.innerHTML = '<h1>I am however working</h1>';
  });
  
})(window);

#container {
  height:400px;
  width:400px;
  background:red;
}

#form_element {
  display:inline-block;
}

<form action="" id="form_element">
  <input type="text" placeholder="Enter here..."/>
</form>

<form action="" id="form_element2">
  <input type="text" placeholder="Enter here..."/>
</form>

<div id="container">
  <h2>Something goes here</h2>
</div>

你能帮我解释一下吗？这在 jquery 选择器中有何不同？

我被这样的小情况困住了。你能帮我解决一下吗？

谢谢

Answer 1

问题在于，鼠标抬起时的目标是输入元素，而不是表单

这里有一些方法可以解决您的问题

1. 检查目标是否是输入元素

   window.addEventListener("mouseUp", getAlert);
   function getAlert(event) {
       if (event.target === form.firstElementChild) {
           alert('I clicked on a form');
       }
   }
   

2. 将监听器添加到表单，这样就不需要检查任何内容

   form.addEventListener("mouseUp", getAlert);
   function getAlert(event) {
       alert('I clicked on a form');
   }
   

3. 检查目标是否是表单，或者目标是否是元素 表单

   window.addEventListener("mouseUp", getAlert);
   function getAlert(event) {
       if (event.target === form || form.contains(event.target)) {
           alert('I clicked on a form');
       }
   }
   

4. 使用 CSS 向 form 添加一些 padding，以便您有空间来单击 form code> 无需点击输入

   #form_element {
       padding: 20px;
   }
   

5. 使用 CSS 使输入元素对鼠标“不可见”

   #form_element>input {
       pointer-events: none;
   }