2010-03-16 5 views
0

업데이트 2 :jquery focusin() 및 버블 링 방지

나는 잠을 잘랐다. 그런 다음 문제를 파악하기 위해 몇 가지 샘플 코드를 작성했다.

http://jsbin.com/axefo3/11

1) 첫 번째 링크를 클릭하십시오 :

가 여기에 focusIn 이벤트를 트리거하는 객체를 보여주기 위해 불을 지르고의 CONSOLE.LOG을 사용하여 샘플의 노란색 사업부는 2) 탭을 공격 표시 키 : 노란색 div 내의 링크를 탭해야합니다.

그렇지만 focusin 이벤트가 발생하고 어떤 이유로 든 빨간색 div에 거품이 생겨 다시 닫히는 것처럼 보입니다 노란색 div.

이것은 내가 행사하는 focusIn 전달 될하지 않도록 노란색 DIV 말했다 후에도입니다 :

$('#innerDiv').focusin(function(e){e.stopPropagation()}); 

내가 그때 내부 사업부에하는 focusIn 후에 만 ​​부모 DIV의 focusIn 이벤트를 부착했습니다. 이 일이 무엇

http://jsbin.com/axefo3/16

는 내부 사업부의 첫 번째 링크를 탭 이동하는 부모 DIV의 focusIn 이벤트를 설정 않는다는 것입니다. 이것은 좋다! 그러나 innerdiv 내의 바로 다음 링크로 이동하면 focusin 이벤트가 다시 닫히고 div가 닫힙니다.

그래서 나는 아직도 난처한 것 같아요. 내가 버블 링하는 것을 멈출 수는 없다. 생각? 이론? 아래

원래의 게시물 ...

============================

내가 보여주는거야 onclick 이벤트를 통해 div. div 외부를 클릭하면 숨기려고합니다. 실제로 사업부 내에서 클릭하면에 클릭을 유발하지 않도록 사업부 자체 내에서

$('body').one('click.myDivPopup', function(e) { 
    ...close my div... 
}); 

, 나는 이벤트를 전달 될 수 없습니다 그것을 말해 이렇게하려면, 나는 몸에 한 번 클릭 이벤트를 바인딩 해요 본문 :

$myDiv.click(function(e){e.stopPropagation()}); 

의도 한대로 작동합니다.

또한 div에서 탭 밖으로 나가면 div를 숨기려고합니다. 그래서이 추가, 다시

$('body').one('focusin.myDivPopup', function(e) { 
    ...close my div... 
}); 

, 나는 사업부 자체에서 거품으로 이벤트를 원하지 않는다 :

내 생각은 시나리오에서, 나는 몸에 focusIn 이벤트를 사용할 수 있었다 :

$myDiv.focusin(function(e){e.preventDefault()}); 

이것은 작동하지 않습니다. myDiv 내의 요소 내에서 포커스를 변경하면 bodyin 이벤트가 트리거됩니다.

jQuery의 버그 일 수 있습니까? 그렇다면 더 좋은 방법이 있습니까?

업데이트 : 그것은 포커스를 가질 수 없어 이후

문제는 DIV가 포커스를 잃은 경우 확인할 방법은없는 것 같다 것 같다. 내 솔루션 논리 뭔가 ELSE div (그래서 focusin 사용하여) 포커스가 있었는지 볼 수 있지만 div 내에서 focusin 이벤트 문제가 실행중인 겉으로는 본문에 트리거링하여 거기 밖으로 버블 링.

지금 내 솔루션은 팝업에 CLOSE 엘먼트를 추가 한 다음 사람들이 명시 적으로 트리거해야한다는 것입니다. 키보드 탐색에 특히 이상적이지 않습니다.

+0

최종 해결책은 무엇입니까? –

+0

@MykaEyl 이것은 오래 전 일이었습니다. :) 결국 솔루션은 팝업이 DIV를 닫고 열 수있는 '닫기'링크가 있는지 확인하기위한 디자인 결정이라고 생각합니다. 마우스를 사용하는 사용자는 여전히 div 외부의 아무 곳이나 클릭 할 수 있지만 키보드 사용자는 div를 닫도록 명시 적으로 선택해야했습니다. –

답변

0

2 개 div를 표시하는 것이 더 쉽지 않을까요? 하나의 투명 (보이지 않는) div는 전체 페이지를 표시하고 다른 하나는 실제로 보여주고 싶습니다. 그럼 당신은 z-index 올바른 시체를 설정해야합니다 < invisblediv < contentdiv.

그런 다음 invisible div에 대한 click 이벤트를 등록하고 클릭하면 모두 제거됩니다. 끝마친. 적어도 이것은 대부분의 사람들이 어떻게 그러한가입니다. 모달 대화 JQuery와 플러그인은 당신이하는 focusIn 사용하지만 이벤트 버블 링을 이용하지하려면 내가

데모 http://jsbin.com/uzoyo/3

+0

더 쉬울 지 모르지만 옵션이 될 수 있습니다. 하지만 div가 포커스를받을 수 있는지 확실하지 않습니다. –

+0

클릭하면 작동하지만 탭 아웃은 작동하지 않습니다. 귀하의 예제에서 div를 표시 한 다음 텍스트를 클릭하여 div가 포커스가되도록합니다. 그런 다음 Tab 키를 눌러 div 밖으로 탭합니다. 두 시나리오에서 div가 사라질 필요가 있습니다 (다른 곳을 클릭하거나 div에서 탭 이동). 목표는 키보드 탐색을 수용하는 것입니다. –

+0

새로운 데모 제작 http://jsbin.com/uzoyo/3 – jitter

0

를 추측 일을, 왜 그냥 focus를 사용하지 않는 ...?

관련 문제