文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >事件侦听器对未附加的元素触发

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

Stack Overflow用户
提问于 2015-10-02 02:36:59
回答 2查看 55关注 0票数 0

我将单击事件侦听器附加到我的搜索按钮(没有任何事件附加到id‘username’的元素上)，但是当我单击文本字段时，也会触发click事件。无论我点击这两个中的哪一个，事件无论如何都会被解雇！有人能解释一下为什么吗

​

代码语言：javascript
复制
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;
		});
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-02 03:16:47

搜索按钮和搜索框被放置在标签元素id=“搜索块”中，因此正在发生这种情况。你能把按钮和盒子从标签元素中移出吗？

票数 0
EN

Stack Overflow用户

发布于 2015-10-02 03:20:01

​

代码语言：javascript
复制
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;
		});
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>
				<div id='search-block'>

					<button class='im' id='search'>Search</button>
					<span id='filler'><input type='text' class='im' id='username'/></span></div>
				
				<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>

​

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32899735

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档