个人中心
gpt4 book ai didi

javascript - 事件监听器在未附加的元素上触发

转载 作者：行者123 更新时间：2023-11-28 07:06:48 25 4
gpt4 key购买 nike

我将点击事件监听器附加到我的搜索按钮(并且没有事件附加到 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/

25 4 0
文章推荐： css - 如何对齐表单中的输入框
文章推荐： swift - 从具有 uint8_t ** 作为输出参数的 Swift 调用 native 方法
文章推荐： javascript - 从 Pebble 到 Raspberry Pi Python 服务器的 Ajax http 请求失败
文章推荐： html - 悬停时的CSS选择器~
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com