An HTML webpage is rendered in div. How can I allow the user to click and select any HTML tag? Similar to how Firebug and Chrome does it. I need the selected tag returned as is.
2
-
1Don't delete it. Instead, accept an answer and let it be for other people that can have the same problem.Alex Turpin– Alex Turpin2011-10-03 16:31:28 +00:00Commented Oct 3, 2011 at 16:31
-
Think twice before asking a question if you don't want to be embarrassed by it later on. Personally, I wouldn't worry about it. We all have embarrassing questions (I could go on...).user1228– user12282011-10-07 16:25:44 +00:00Commented Oct 7, 2011 at 16:25
Add a comment
|
3 Answers
Add an event listener on your div and check for the event's target property (srcElement for IE).
document.getElementById("page").onclick = function(e) {
var target = e.target || e.srcElement;
alert(e.target.tagName);
};
Comments
In jQuery:
$.click( function(){
var clicked = $(this);
});
2 Comments
HyderA
My initial idea was to allow dragging a rectangle to select a group of elements, but I figured I would have issues determining which child the user really wanted to select among hierarchical elements. So I toned it down to this without really thinking.
Chris G.
Can also use
$.mouseover to apply a CSS border to provide visual feedback a'la Firebugyou can add a onclick attribute to each html element which returns itself.
Chrome and Firefox also have a hover which outlines the element tough. To make that in a easy (and ugly) way you could add a hover css pseudo class for the html elements which adds a border of 1px to the html element.
*:hover{
border: 1px solid;
}
A better way would be to create a new element with javascript with the same measurements and position and to give it a z-index so it floats above the existing element
