未连接元素的事件侦听器触发
[英]event listener firing on element not attached
问题描述
我将点击事件侦听器附加到了搜索按钮上（并且没有事件附加到ID为'username'的元素上），但是当我单击文本字段时，也会触发点击事件。 无论我单击哪两个事件，事件都将被触发！ 谁能解释我为什么
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>
2 个解决方案
解决方案1
0 已采纳 2015-10-02 03:16:47
搜索按钮和搜索框放置在标签元素[id =“ search-block”]内，因此发生了这种情况。 您可以将按钮和框移出标签元素吗？
解决方案2
0 2015-10-02 03:20:01
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> <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以保持对齐。
动态生成的元素不触发事件监听器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.