Question

我将点击事件监听器附加到我的搜索按钮，（并且没有事件附加到带有ID＆＃39;用户名＆＃39;的元素）但是当我点击文本字段时，也会触发click事件。无论我在哪两个点击该事件都被解雇了！谁能解释我为什么

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

搜索按钮和搜索框位于标签元素[id =＆＃34; search-block＆＃34;]内，因此会发生这种情况。你可以将标签元素中的按钮和框移出来吗？

Answer 2

＆＃13;

git init

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

我已将标签转换为div以保持对齐。

事件侦听器触发未附加的元素

2 个答案: