외부 탐지기를 클릭하십시오

그것은 당신이 무언가를 클릭하기 시작할 수있는 합리적인 UX의 것입니다. 그런 다음 같은 것을 클릭하여 닫을 수있을뿐만 아니라 닫기 위해 열린 것 외부를 클릭하십시오. Kitty Giraudel은 방금 블로그를 작성했습니다. 속임수는 일단 물건이 열리면 이벤트 핸들러를 이벤트 시계 (또 다른 클릭과 같은)와 함께 창에 첨부한다는 것입니다. 이후 클릭이 새로 열린 지역 내에서 발생하지 않으면 닫으십시오. 말 그대로 thing.contains (event.target). 좋은 속임수라고 생각합니다.

그래도 생각해야 할 작은 것들이 많이 있습니다. 예를 들어:

토글 자체에서 클릭 이벤트의 전파를 중지해야합니다. 그렇지 않으면, 그것은 창 클릭 리스너로 올라가고, 토글이 메뉴 내에 포함되지 않기 때문에, 우리가 그것을 열려고하자마자 후자를 닫을 것입니다.

오른쪽. 그것을 가질 수 없거나 모든 것을 깨뜨립니다.

우리는 Codepen의 많은 장소에서 동일한 패턴을 가지고 있습니다. 키티와 마찬가지로, 우리는 그것을 React에서 구현했습니다. 우리의 구현을 엿볼 때, 그것은 내가 언급 할 가치가 있다고 생각했던 많은 종과 휘파람이 있습니다. 예를 들어, 우리는 기능이나 후크가 아니라 다음과 같이 사용하는 구성 요소 래퍼입니다.

 <clickoutsidedetector onclickoutside="{()"> {closeThingething (); }}
>
  메뉴 나 모달 등.
</clickoutsidedetector>

그렇게하면 "클릭 외부"에서 무엇이든 사용할 수있는 일반 래퍼입니다. 종소리와 whistles는 다음과 같습니다.

• 구성 요소 소품으로 전달하여
  로 나타나지 않아도되지만 원하는 것은 의미 적으로 나타납니다.
• Listen Prop을 사용하면 현재 이벤트를 적극적으로 듣고있는 경우 토글을 전환 할 수 있습니다. 짧은 회로를하는 빠른 방법처럼.
• ESC 키 프레스는 외부를 클릭하는 것과 동일합니다.
• 터치 이벤트와 클릭을 처리합니다
• 외부 클릭이
• Kitty가 문서화 한 스톱 포거레이션 트릭 대신 외부 클릭을 유발하지 않는 요소에 대해 구체적으로 할 수 있습니다.

너무 많은 작은 것들! 나에게 이것은 실제 개발의 완벽한 작은 예입니다. 당신은 단지 하나의 작은 행동을 원하고 궁극적으로 당신이 다루어야 할 수많은 고려 사항과 가장자리 케이스가 있으며 실제로는 결코하지 않았습니다. 지난 몇 개월 동안 우리가 사용한 타사 도구로 인해 페이지에 사용중인 iframes에 영향을 미치는 작업을 변경 한 방식으로 인해 구성 요소를 만졌습니다. 궁극적으로 나는 Blur 이벤트를 관찰해야했으며, 문서의 클래스리스트를 확인하여 외부 클릭을 먹는 것이 있는지 확인하십시오!

Annnnyway, 나는 여기에 우리의 유일한 멍청한 버전을 던졌습니다.

그리고 나는 키티의 게시물에서 우리가 처리하지 않은 것을 보았고, 그것은 첫 번째 문장에 있습니다.

우리는 메뉴를 클릭 하거나 그 메뉴를 탭할 때 메뉴를 닫을 수있는 방법이 필요했습니다.

강조 광산. 걱정하지 마세요. 지금 우리 코드에 할 일이 있습니다.

위 내용은 외부 탐지기를 클릭하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!