Sina 홈페이지의 검색 상자에 Ajax를 사용하는 드롭 다운 상자가 있습니다. 드롭 다운 상자에서 클릭 항목을 구현하려면 검색 상자의 값 이이 항목이되고 드롭 다운 상자가 사라지지만 동시에 다른 장소를 클릭하면 드롭 다운 상자도 사라집니다. 그림과 같이 :
우리는 Onblur와 OnClick을 사용하여 드롭 다운 상자를 숨기지 만 더 큰 문제가 발생합니다. 이 두 기능은 충돌합니다. OnBlur는 너무 강력하고 OnClick 방법을 구현할 기회가 없습니다. 검색 창은 클릭 항목의 내용을 얻을 수 없습니다. 이것은 우리가 해결하고자하는 Onclick 및 Onblur 충돌 문제입니다.
이 문제에 대해 두 가지 솔루션을 소개합니다.
1. Settimeout을 사용하여 Onblur 시간의 실행을 지연시킨 다음 OnClick 실행 후 OnBlur를 실행하십시오. (Settimeout의 시간 설정은 100ms 이상이어야합니다. 그렇지 않으면 여전히 작동하지 않습니다) 예제 코드는 다음과 같습니다.
<! doctype html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin : 0; 패딩 : 0; 목록 스타일 : 없음; } 양식 {너비 : 500px; 여백 : 0 Auto; 위치 : 상대; 줌 : 1; } 양식 : {clear : 둘 다; 콘텐츠: ""; 디스플레이 : 블록; } .text {float : 왼쪽; 국경 : 1px 고체 #cccccc; 왼쪽 패딩 : 14px; 너비 : 300px; 높이 : 34px; 라인 높이 : 34px; 글꼴 크기 : 14px; } .Button {너비 : 50px; 높이 : 34px; 국경 : 1px 고체 #cccccc; 라인 높이 : 34px; 글꼴 크기 : 14px; 색상 : #ffffff; 배경 :#FF8400; } ul {위치 : 절대; 상단 : 36px; 왼쪽 : 0; 너비 : 300px; 경계-권리 : 1px 고체 #cccccc; 왼쪽 경계 : 1px 고체 #cccccc; 배경 : 녹색; 디스플레이 : 없음; } li {font-size : 14px; 라인 높이 : 34px; 높이 : 34px; 색상 :#000000; 국경-바닥 : 1px solid #cccccc; } li : 호버 {배경 : 노란색; 색상 : 빨간색; 커서 : 포인터; }. var oul = document.getElementById ( 'ul'); var ali = oul.getElementsByTagName ( 'li'); var timer = null; otext.onfocus = function () {this.value = ''; oul.style.display = '블록'; for (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {cleartimeout (timer); otext.value = this.innerhtml; oul.style.display = 'none'; }; }}; otext.onblur = function () {timer = settimeout (function () {oul.style.display = 'none'; if (! otext.value) {otext.value = 'keyword';}}, 120); }; }; </script> </head> <body> <form> <입력 유형 = "text"value = "키워드를 입력하십시오"id = "text"/<input type = "value"value = "search"/<ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "input type ="button " </li> <li> 창의 이름을 설정하거나 반환하십시오. </li> <li> 창의 외부 높이로 돌아갑니다. </li> </ul> </form> </body> </html>2. 문서를 사용하여 Onblur를 교체하여 숨겨진 드롭 다운 기능을 구현합니다.
<! doctype html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin : 0; 패딩 : 0; 목록 스타일 : 없음; } 양식 {너비 : 500px; 여백 : 0 Auto; 위치 : 상대; 줌 : 1; } 양식 : {clear : 둘 다; 콘텐츠: ""; 디스플레이 : 블록; } .text {float : 왼쪽; 국경 : 1px 고체 #cccccc; 왼쪽 패딩 : 14px; 너비 : 300px; 높이 : 34px; 라인 높이 : 34px; 글꼴 크기 : 14px; } .Button {너비 : 50px; 높이 : 34px; 국경 : 1px 고체 #cccccc; 라인 높이 : 34px; 글꼴 크기 : 14px; 색상 : #ffffff; 배경 :#FF8400; } ul {위치 : 절대; 상단 : 36px; 왼쪽 : 0; 너비 : 300px; 경계-권리 : 1px 고체 #cccccc; 왼쪽 경계 : 1px 고체 #cccccc; 배경 : 녹색; 디스플레이 : 없음; } li {font-size : 14px; 라인 높이 : 34px; 높이 : 34px; 색상 :#000000; 국경-바닥 : 1px solid #cccccc; } li : 호버 {배경 : 노란색; 색상 : 빨간색; 커서 : 포인터; }. var oul = document.getElementById ( 'ul'); var ali = oul.getElementsByTagName ( 'li'); var timer = null; otext.onfocus = function () {this.value = ''; oul.style.display = '블록'; for (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {cleartimeout (timer); otext.value = this.innerhtml; oul.style.display = 'none'; }; }}; document.onmousedown = function (ev) {var oevent = ev || event; var target = oevent.target || oevent.srcelement; if (target.parentNode! == oul && target! == otext) {oul.style.display = 'none'; }}; otext.onblur = function () {if (! otext.value) {otext.value = '키워드를 입력하십시오'; }}; }; </script> </head> <body> <form> <입력 유형 = "text"value = "키워드를 입력하십시오"id = "텍스트"/> <입력 유형 = "value ="search "/<ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "ul id ="ul id = "input type ="value " </li> <li> 창의 이름을 설정하거나 반환하십시오. </li> <li> 창의 외부 높이로 돌아갑니다. </li> </ul> </form> </body> </html>OnClick 및 OnBlur의 위 충돌 문제에 대한 빠른 해결책은 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.