【发布时间】：2015-12-30 05:24:16
【问题描述】：
我将单击事件侦听器附加到我的搜索按钮，（并且没有事件附加到 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>【问题讨论】：
-
对不起，我不明白！我改了javascript还是不行！
-
我测试了你的代码并且它工作正常
-
@Vance 我又试了一次，它做同样的事情，无论我点击哪一个，它都会触发点击事件！
-
这很奇怪。单击搜索按钮和单击搜索框时“输出”项的内容是什么？
-
有人发布了一个答案（并删除了它）说这是因为内容在标签标签内。我更改了一个 div 的标签，它解决了这个问题。回答这个问题的人值得称赞！
标签： javascript html css