스타일을 변경하려면 onClick 이벤트가 있습니다. 사용자가 항목의 다른 곳을 클릭 할 때 스타일을 다시 변경하는 방법은 무엇입니까?다른 곳에서 클릭 이벤트가 발생 했습니까?
프로토 타입 및 scriptaculous 라이브러리가 모두 포함되어 있습니다. 아래 답변 중 많은 부분이 작동하지 않습니다 ... 또한 요소의 ID는 정의되지 않으므로 자바 스크립트에서 참조 할 수 없습니다. 항목이 그것을 클릭하면
감사합니다, 얀
내가 가진 모든 브라우저에서이 테스트,하지만 당신은 새로운 JS 프레임 워크를 도입하지 않으려는 경우,이 솔루션은 CSS를 사용
이<ul>
<li tabindex="1">First</li>
<li tabindex="2">Second</li>
</ul>
속성이 tabIndex은 리튬 요소 FO한다 cusable. 그리고 css :
li { color: #F00; }
li:focus { color: #0F0 }
이것은 물론 매우 기본 스타일링입니다. 아마도 수업에 넣기를 원할 것입니다.
좋은 답변이지만 IE8 이상에서만 지원됩니다. – Paddy
아, 잘 알고 있습니다. Chrome에서만 직접 테스트했습니다. – DanneManne
사용하여 jQuery를 라이브 이벤트와 바인드 클릭 이벤트를 사용할 수 있습니다. 다른 것을 클릭하면 은 포커스를 잃고 onblur 이벤트가 발생합니다. 모든 요소에서 작동하지는 않지만, 예를 들어 <input> 요소에서 작동합니다.
"li"요소가 없습니다. http://jsbin.com/ojohe5/ – Yan
큰 질문입니다!
if (event.target === myElement) {
changeStyle();
} else {
changeStyleBack();
}
document 또는
table), 거기 당신은 무언가 같이 말한다
자세한 내용은 여기 (다른 곳에서) : http://www.southsearepublic.org/tag/Javascript%20Event%20Bubbling/read
당신은 onblur 이벤트를 원하는 : "개체가 포커스를 잃을 때 onBlur 이벤트가 발생합니다."
"li"요소에 대해 작동하지 않습니다. http://jsbin.com/ojohe5/ – Yan
나는 이것이 최상의 솔루션이라고 말하지는 않지만, li 요소에 tabIndex를 설정하면 포커스가 가능합니다. – DanneManne
당신이 jQuery를에 그것을 할 수있는 방법은 다음과 같습니다
$(document).click(function(e) {
if ($(e.target).is("#specialItem")) {
$(e.target).addClass("specialClass");
} else {
$(#specialItem").removeClass("specialClass");
}
});
당신이 jQuery를 사용하지 않는 경우, 당신은 여전히 기본 모델을 사용할 수 있습니다 - 문서 수준에서 onclick 이벤트 논리를 적용 할 수 있습니다. 이것은 blur 이벤트에 응답하지 않는 항목에 대해 작동합니다.
하지만 이건 특정 ID에 바인딩됩니까? 동적 목록이 있으므로 이드를 모른다. – Yan
#specialItem을 코드에 필요한 것으로 변경하면된다. –
body에서 onClick 이벤트를 바인딩하고 해당 이벤트에 스타일을 복원하는 함수를 할당 할 수 있습니다.
가 내가 프로토 타입을 사용 했으므로 꽤 오랜 시간이되었습니다 http://jsbin.com/oxobi3
에서 라이브 예제하지만 난이 당신을 도움이되기를 바랍니다 (비의 jQuery 의미에서.)
$(window).observe('click', respondToClick);
function respondToClick(event) {
var element = event.element();
if(!($(this) == element)){
element.addClassName('active');//or do your stuff here
}
}
이 당신이 화면에 어딘가에 클릭하고 아닌 요소에 때, 다음 스타일이 다시
사용 jQuery의 전환을 바꿀 것입니다 있는지 확인합니다
내 방식. – RPM1984