0
我附加單擊事件監聽器到我的搜索按鈕(並沒有事件被附加到ID爲'用戶名'的元素),但是當我點擊文本字段時,點擊事件也被觸發。無論在哪兩個我點擊的事件都會被解僱!任何人都可以解釋我爲什麼事件監聽器觸發元素未連接
var e;
\t var m;
\t var h;
\t var c;
\t
u = document.getElementById('username');
s = document.getElementById('search');
\t \t c = document.getElementById('output');
\t \t s.addEventListener('click', function(e){
\t \t \t c.innerHTML = this.id;
\t \t });
\t
#reset-password,
#find-account{
\t width: 500px;
\t height: auto;
\t
\t margin: 0px auto;
}
#reset-password > #title{
\t color: #A0A0A0;
}
#reset-password > #search-block{
\t width: 100%;
\t display: block;
\t overflow: hidden;
\t border: 1px solid blue;
}
#reset-password #search-block #filler{
\t display: block;
\t overflow: hidden;
}
#reset-password #search-block > #filler > #username{
\t width: 96.5%;
}
#reset-password #search-block > #search{
\t float: right;
}
#reset-password > #content > #how-to-contact-you,
#reset-password > #content > #attempt-error{
\t display: none;
}
#reset-password > #content > #how-to-contact-you > div.via{
\t margin: 12.5px 0px;
}
#reset-password > #content > #how-to-contact-you > div.via > label > small{
\t font-weight: bold;
}
#reset-password > #content > #how-to-contact-you > div.via > small{
\t padding-left: 25px;
}
#reset-password > #content > #how-to-contact-you > #submit{
\t display: block;
\t margin-left: auto;
}
#reset-password > #content > * > h3{
\t display: block;
\t position: relative;
\t
\t padding: 5px 0px;
\t
\t border-width: 1px;
\t border-color: #C0C0C0;
\t border-top-style: solid;
}
#reset-password > #content > * > h3:after{
\t display: block;
\t content: '\0020';
\t position: absolute;
\t
\t width: 10px;
\t height: 10px;
\t
\t top: -1px;
\t left: 50%;
\t
\t
\t border-width: 1px;
\t border-color: #C0C0C0;
\t border-style: solid none none solid;
\t
\t background: #FFFFFF;
\t
\t -webkit-transform: translateY(-50%) rotate(45deg);
\t -moz-transform: translateY(-50%) rotate(45deg);
\t \t \t transform: translateY(-50%) rotate(45deg);
}
#reset-password > #content > #how-to-contact-you > h3{
\t color: #75B618;
}
#reset-password > #content > #attempt-error > h3{
\t color: #FF1504;
}
<body>
\t <div class='A4 page content'>
\t \t <div id='reset-password'>
\t \t \t <big id='title'>Find your account</big>
\t \t \t <div id='content'>
\t \t \t \t <p><small>Enter your email or phone number</small></p>
\t \t \t \t <label id='search-block'>
\t \t \t \t \t <button class='im' id='search'>Search</button>
\t \t \t \t \t <span id='filler'><input type='text' class='im' id='username'/></span>
\t \t \t \t </label>
\t \t \t \t <div id='how-to-contact-you'>
\t \t \t \t \t <h3>Reset Password</h3>
\t \t \t \t \t <h5>Choose an option to reset your password</h5>
\t \t \t \t \t <div class='via'>
\t \t \t \t \t \t <input class='radio' id='email' name='cell-desktop' type='radio' value='email' checked/>
\t \t \t \t \t \t <label for='email'><small>Email me</small></label><br/>
\t \t \t \t \t \t <small>[email protected]</small>
\t \t \t \t \t </div>
\t \t \t \t \t <div class='via'>
\t \t \t \t \t \t <input class='radio' id='text' name='cell-desktop' type='radio' value='text'/>
\t \t \t \t \t \t <label for='text'><small>Text me</small></label><br/>
\t \t \t \t \t \t <small>xxx-xxx-xxxx</small>
\t \t \t \t \t </div>
\t \t \t \t \t <!-- <input type='submit' class='im' id='submit' value='Submit'/> -->
\t \t \t \t </div>
\t \t \t \t <div id='attempt-error'>
\t \t \t \t \t <h3>Account could not be found!</h3>
\t \t \t \t \t <p>
\t \t \t \t \t \t <small>We were unable to find your account using the information you provided!</small>
\t \t \t \t \t </p>
\t \t \t \t </div>
<label id='output'></label>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
對不起,我不明白!我改變了JavaScript,仍然無法使用! – Gacci
我測試了你的代碼和它的工作正常 – Vance
@Vance我再次嘗試,它做同樣的事情,無論我點擊它觸發單擊事件anyhows! – Gacci