2015-10-02 106 views
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>

+0

對不起,我不明白!我改變了JavaScript,仍然無法使用! – Gacci

+0

我測試了你的代碼和它的工作正常 – Vance

+0

@Vance我再次嘗試,它做同樣的事情,無論我點擊它觸發單擊事件anyhows! – Gacci

回答

0

搜索按鈕和搜索框放置在標籤元素[ID =「搜索框」]裏面,因此,這種情況正在發生。你可以將按鈕和框移出標籤元素嗎?

0

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 <div 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></div> 
 
\t \t \t \t 
 
\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>

我已經轉換的標籤div來保持對齊。