我将点击事件监听器附加到我的搜索按钮(并且没有事件附加到 ID 为“用户名”的元素)但是当我点击文本字段时，点击事件也会被触发。无论我点击两个中的哪一个，事件都会被触发!谁能解释一下为什么
var e;
var m;
var h;
var c;
u = document.getElementById('username');
s = document.getElementById('search');
c = document.getElementById('output');
s.addEventListener('click', function(e){
c.innerHTML = this.id;
});
#reset-password,
#find-account{
width: 500px;
height: auto;
margin: 0px auto;
}
#reset-password > #title{
color: #A0A0A0;
}
#reset-password > #search-block{
width: 100%;
display: block;
overflow: hidden;
border: 1px solid blue;
}
#reset-password #search-block #filler{
display: block;
overflow: hidden;
}
#reset-password #search-block > #filler > #username{
width: 96.5%;
}
#reset-password #search-block > #search{
float: right;
}
#reset-password > #content > #how-to-contact-you,
#reset-password > #content > #attempt-error{
display: none;
}
#reset-password > #content > #how-to-contact-you > div.via{
margin: 12.5px 0px;
}
#reset-password > #content > #how-to-contact-you > div.via > label > small{
font-weight: bold;
}
#reset-password > #content > #how-to-contact-you > div.via > small{
padding-left: 25px;
}
#reset-password > #content > #how-to-contact-you > #submit{
display: block;
margin-left: auto;
}
#reset-password > #content > * > h3{
display: block;
position: relative;
padding: 5px 0px;
border-width: 1px;
border-color: #C0C0C0;
border-top-style: solid;
}
#reset-password > #content > * > h3:after{
display: block;
content: '\0020';
position: absolute;
width: 10px;
height: 10px;
top: -1px;
left: 50%;
border-width: 1px;
border-color: #C0C0C0;
border-style: solid none none solid;
background: #FFFFFF;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
#reset-password > #content > #how-to-contact-you > h3{
color: #75B618;
}
#reset-password > #content > #attempt-error > h3{
color: #FF1504;
}<body>
<div class='A4 page content'>
<div id='reset-password'>
<big id='title'>Find your account</big>
<div id='content'>
<p><small>Enter your email or phone number</small></p>
<label id='search-block'>
<button class='im' id='search'>Search</button>
<span id='filler'><input type='text' class='im' id='username'/></span>
</label>
<div id='how-to-contact-you'>
<h3>Reset Password</h3>
<h5>Choose an option to reset your password</h5>
<div class='via'>
<input class='radio' id='email' name='cell-desktop' type='radio' value='email' checked/>
<label for='email'><small>Email me</small></label><br/>
<small>emailusername@domain.com</small>
</div>
<div class='via'>
<input class='radio' id='text' name='cell-desktop' type='radio' value='text'/>
<label for='text'><small>Text me</small></label><br/>
<small>xxx-xxx-xxxx</small>
</div>
<!-- <input type='submit' class='im' id='submit' value='Submit'/> -->
</div>
<div id='attempt-error'>
<h3>Account could not be found!</h3>
<p>
<small>We were unable to find your account using the information you provided!</small>
</p>
</div>
<label id='output'></label>
</div>
</div>
</div>
</body>最佳答案
搜索按钮和搜索框放置在标签元素 [id="search-block"] 内，因此发生了这种情况。你能把按钮和盒子移出标签元素吗？
关于javascript - 事件监听器在未附加的元素上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32899735/