2011-10-03 10 views
1

HTML 웹 페이지는 div에 렌더링됩니다. 사용자가 HTML 태그를 클릭하여 선택할 수있게하려면 어떻게합니까? Firebug 및 Chrome과 유사합니다. 선택한 태그를 그대로 반환해야합니다. jQuery를에HTML 요소 시각적 선택

+1

를 삭제하지 마십시오 기존의 요소 위에 떠 있도록에게 Z- 인덱스를 제공하는 것입니다. 대신 대답을 수락하고 같은 문제가 발생할 수있는 다른 사람들에게도 맡깁니다. –

+0

나중에 질문에 당혹스럽지 않으려면 질문을하기 전에 두 번 생각하십시오. 개인적으로, 나는 그것에 대해 걱정하지 않을 것입니다. [우리] (있다 (http://stackoverflow.com/q/12268/) [모두] (있다) (http://stackoverflow.com/q/150845/) [가지고] (http://stackoverflow.com/q/244285/)) [당황하게] (http://stackoverflow.com/q/379343/) [질문] (http://stackoverflow.com/q/1060240/) (나는 갈 수 ...). – Will

답변

4

div에 이벤트 리스너를 추가하고 이벤트의 target 특성 (IE에 대한 srcElement)을 확인합니다.

document.getElementById("page").onclick = function(e) { 
    var target = e.target || e.srcElement; 
    alert(e.target.tagName); 
}; 

http://jsfiddle.net/Xeon06/e67qW/1/

2

:

$.click(function(){ 
    var clicked = $(this); 
}); 
+0

나의 초기 아이디어는 사각형을 드래그하여 요소 그룹을 선택할 수있게하는 것이었지만 사용자가 계층 적 요소 중에서 실제로 어떤 것을 선택하려고했는지 결정하는 데 문제가있을 것이라고 생각했습니다. 그래서 저는 이것을 정말로 생각하지 않고 토닝했습니다. – HyderA

+0

'$ .mouseover'를 사용하여 CSS 테두리를 적용하여 시각적 피드백을 제공 할 수도 있습니다. Firebug –

1

당신은 자신을 반환 각 HTML 요소에 onclick 속성을 추가 할 수 있습니다.

Chrome 및 Firefox에는 요소를 윤곽선으로 가리키는 호버가 있습니다. 쉽고 (그리고 추악한) 방법으로 html 요소에 hover css pseudo 클래스를 추가하면 html 요소에 1px의 테두리를 추가 할 수 있습니다.

*:hover{ 
    border: 1px solid; 
} 

더 좋은 방법은 동일한 측정 및 위치에 자바 스크립트로 새로운 요소를 생성하고