2009-06-24 3 views
1

여기 내 문제가 있습니다. 저는 onClick 속성을 사용하여 목록에서 특정 항목을 클릭 할 수있는 웹 사이트를 디자인하고 있습니다. 페이지의 다른 곳을 클릭하여 항목을 선택 취소하고 싶습니다. 나는 <body onClick="deselect()">을 시도했지만, 페이지의 아무 곳이나 클릭하면 항목을 선택 취소합니다 (처음 선택을 클릭해도!).특정 지역을 제외한 페이지의 아무 곳이나 클릭을 감지하는 방법이 있습니까?

그래서 사용자가 페이지의 다른 곳을 누른 다음 내 목록에서 클릭했는지 감지하는 방법이 있습니까?

고마워요.

편집 : onBlur 및 handleClick을 혼합 된 결과로 시도했습니다. handleClick 메서드는 내가 선택한 항목을 클릭 할 때 두 번 호출됩니다.이 항목을 선택하고 즉시 선택을 취소합니다. 및 onblur에서

답변

0

보기

+0

난 그냥 및 onblur를 시도하고 내가 빈 지역을 클릭 할 때 항상 작동하지 않는,이 느슨하게하지 않는 것 초점을 –

+0

선택 취소 방법을 사용하여 해당 요소의 항목을 선택 취소하지 않으면 이벤트 원본을 확인할 수 있습니다. 그게 너무 작동해야합니다 –

3

에 onblur이 표준 HTML 입력 요소 아니므로 그것을 잘라하지 않을 당신의 요소에서 '손실'때 블러입니다 .

onclick 이벤트가 호출 될 때 this이 참조하는 것을 검사하려고합니다. 목록의 항목을 참조하는 경우 목록에서 항목을 선택할 수 있습니다. 목록 외부를 참조하는 경우 목록의 모든 항목을 선택 취소하십시오. 이 코드를 사용하여 요소가 목록 항목임을 식별하기 위해 HTML에 대한 속성을 가지고에 따라

function handleClick(evt) { 
    if (this.getAttribute('isListItem')) { 
     // highlight 
    } else { 
     // remove highlighting 
    } 
    evt.preventDefault(); 
} 

:

코드는 같을 수 있습니다. 또한 이벤트가 하위 요소로 전파되지 않도록해야합니다. 나는 이것이 필수적이라면 100 % 확신 할 수는 없지만 이벤트가 목록 항목을 포함하는 요소에 전파되기 때문에 종종 그렇습니다.

http://www.w3schools.com/jsref/jsref_onclick.asp

+0

그냥 정확히 내가 무슨 뜻인지 이해하기 위해서, 당신은 bodyClick과 다른 곳에서 onClick을 넣고 handleClick 함수를 호출하게 하시겠습니까? –

+0

를 호출하면 테이블을 클릭하면 handleClick 함수가 두 번 호출됩니다. evt.preventDefault를 넣으면 이벤트가 발생합니다. –

+0

그래, 네가 테이블 위에있는 것이 아니라 온몸이 필요할 것 같아. – cgp

0

의사 코드 :

var bodyOnClick = function(){}; // empty, does nothing 

listItems.onclick = function(){ 
    /* Do stuff */ 
    bodyOnClick = deselect; 
}; 

body.onclick = function() { 
    bodyOnClick(); 
}; 
+0

body.onClick 전에 listItems.onClick이 호출되기 때문에 작동하지 않습니다. –

관련 문제