Question

以下是代码

＆＃13;

(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);

＆＃13;

#container {
  height:400px;
  width:400px;
  background:red;
}

#form_element {
  display:inline-block;
}

＆＃13;

<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>

＆＃13;

你可以帮我解决这个问题吗？这在jquery选择器中有区别吗？

我遇到了这么小的情况。能帮我解决一下吗？

由于

Answer 1

问题在于target是mouse goes up而不是input element

时form

以下是解决问题的一些方法

检查target是否为input element

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

将listener添加到form，以便无需检查任何内容

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

如果target是[{1}}的{{1}}
，请检查form是target还是element
```
form
```
使用window.addEventListener("mouseUp", getAlert); function getAlert(event) { if (event.target === form || form.contains(event.target)) { alert('I clicked on a form'); } }向CSS添加一些padding，这样您就可以有空间点击form而无需点击form
```
input
```
使用#form_element { padding: 20px; }使CSS＆＃34;隐身＆＃34;到鼠标
```
input element
```

为什么event.target不会触发以下代码，而简单的单击事件处理程序工作？

1 个答案: