jquery focusout과 클릭 이벤트 간의 충돌에 대한 솔루션 공유

주류 검색엔진에서 검색할 때 콘텐츠를 입력하면 스마트 프롬프트가 자주 나타납니다. 입력 상자는 입력이고 스마트 프롬프트 영역은 제안입니다. 그 다음에는 일반적으로 두 가지 작업이 있습니다.

1. 프롬프트를 선택하고 콘텐츠를 입력에 복사한 다음 자동으로 제안을 닫습니다.

2. 웹 페이지의 다른 곳을 클릭하면 제안이 자동으로 닫힙니다. C 첫 번째를 달성하려면 Click

이벤트

를 사용하고 Suggest에 마우스 클릭 이벤트를 추가하고 처리의 입력에 클릭 내용을 쓴 다음 Suggest를 닫을 수 있습니다. 단독으로 테스트할 때는 문제가 없습니다. 두 번째 구현에서는 입력 요소에 focusout 이벤트 또는 흐림 이벤트를 추가하고 입력이 포커스를 잃을 때 제안을 닫을 수 있습니다. 단독으로 테스트할 때는 문제가 없습니다.

하지만 합치면 포커스 상실 이벤트(제안 종료)에만 응답하고, 콘텐츠 클릭 이벤트에는 응답하지 않습니다(클릭한 제안 콘텐츠를 가져오지 않음)는 문제가 있습니다.

왜 충돌이 발생하는지 이해가 되지 않습니다. 온라인에서 검색한 결과 비슷한 문제가 발견되었습니다. 어떤 사람들은 블러 사용을 제안했지만 블러는 포커스 아웃과 동일하며 둘 다 작동하지 않습니다.

곰곰히 생각해보니 클릭 이벤트의 트리거 조건이 갑자기 생각났습니다. 버튼을 클릭하면 클릭 이벤트가 트리거되고 클릭에는 마우스 클릭과 마우스 떼기가 포함됩니다.

jquery

의 클릭 이벤트는 마우스를 놓은 후에 발생합니다(사실 버튼 요소와 href 요소의 클릭 이벤트가 이와 같습니다). 방금 발생한 충돌 문제를 이해하게 됩니다. 참고로 이때 입력이 포커스를 잃음 이벤트가 발생하고 제안 영역이 닫힙니다. 이때 마우스가 해제됩니다(컴퓨터 응답 속도가 마우스 클릭 및 해제 속도보다 빠릅니다). , 클릭이 완료되지만 이때 마우스는 더 이상 제안 영역에 있지 않으므로 선택 프롬프트가 위에 있으므로 제안의 클릭 이벤트가 트리거될 수 없습니다.

이에 대해 생각한 후 제안의 응답을 mousedown으로 변경하여 마우스를 클릭하면 트리거되도록 테스트했는데 mousedown 이벤트가 성공했습니다. 둘 다 올바르게 처리되었습니다.

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

click을 mousedown으로 바꾸면 완전 괜찮습니다. 너무 간단해서 말하기 부끄럽지만 가끔은 생각하기 쉽지 않죠!

그 외에도 인터넷에서 찾은 다른 방법 중 하나는

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

이 방법은 숨겨진

animation

을 사용하여 지연을 유발하여 제안 영역에서 클릭 이벤트가 발생하도록 하는 방법입니다. 그러나 슬라이드는 모든 상황에 적합한 것은 아니며, 애니메이션 숨김 속도를 기준으로 기능의 성공 여부를 판단하는 것은 적절하지 않습니다.

또 다른 방법은 입력과 제안을 div에 래핑하고 이벤트를 div에 직접 추가하는 것입니다. 이는 테스트되지 않았지만 이론적으로는 가능합니다.

위 내용은 jquery focusout과 클릭 이벤트 간의 충돌에 대한 솔루션 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!