Get HTML Node (not necessarily an element) on click
I have a web application that, after clicking any node in HTML, needs to get the index of that node in its parent childNodes array. However, I am having trouble getting the currently selected node through the onclick event. The returned event target contains element
, not specific node
within the element. This difference is important when there are text nodes such as:
<div>This is Node 1<span>node 2</span>, node 3, and <span>node 4</span></div>
If you hit spaces for node 2 or node 4, you just need to know where you are. However, if you click on the text for node 1 and node 3, I cannot find where the event will help you determine what part of the actual content was clicked.
This is important because a later operation must check certain properties both forward and backward through the document until the first match. So, if both node 2 and node 4 match the search, I need to know if I am in node 1 or node 3 in order to know which one to return. For example, looking to the right, starting at node 1 should return node 2, while starting at node 3 means that you should return node 4. Obviously, this is an oversimplification, but it demonstrates the problem. Does anyone know a canonical solution for this? If I can get a node object or index, that should be enough. jquery is fine, but not required.
source to share
Maybe something like this demo can help you a little:
document.getElementsByTagName('div')[0].addEventListener('click', function () {
var fullStr = this.innerHTML.replace(/<[^>]*>/g, ''),
sel = window.getSelection(),
str = sel.anchorNode.data,
clickPos = sel.focusOffset,
wordPosLeft = str.slice(0, clickPos + 1).search(/\S+$/),
wordPosRight = str.slice(clickPos).search(/\s/),
wordClicked,
nextWordRegex,
nextWordPosLeft,
nextWord;
if(wordPosRight < 0) {
wordClicked = str.slice(wordPosLeft);
} else {
wordClicked = str.slice(wordPosLeft, wordPosRight + clickPos);
}
nextWordRegex = new RegExp(wordClicked);
nextWordPosLeft = fullStr.search(nextWordRegex) + wordClicked.length;
nextWord = fullStr.slice(nextWordPosLeft).match(/^\s*(\S*)\s*.*$/)[1];
console.log('wordClicked: ' + wordClicked);
console.log('nextWord: ' + nextWord);
});
See this fiddle .
source to share
You need to get your nodes in some containers. If you click on the "Node 1" text, the function will return the element to you <div>
. But, if you change your code to this:
<div>
<span>This is Node 1</span>
<span>node 2</span>
<span>, node 3, and </span>
<span>node 4</span>
</div>
it will work and return the container <span>
. Impossible, in my opinion.
Ultimately you can create JavaScript split () or regex operations.
source to share
If you are just trying to process the text of the element you clicked minus the text of the child nodes, I have a solution:
$('body').on('click', function(e) {
alert('Node Text: '+$(e.target).clone().children().remove().end().text());
});
http://jsfiddle.net/xoegujqu/1/
Basically, delegate the click event to the highest level element you want to fire (in this example, it just used the body, but you probably want to be more specific). use $(e.target)
to get the element that was actually clicked, .clone()
to clone it so you can modify it without affecting the actual page content .children().remove()
, to remove all of its descendant elements .end()
, to revert to a previous jQuery, then finally .text()
to get the remaining text content.
source to share
check even bubble / spread
See also: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener useCapture section
source to share
This is impossible to do as far as I know. You can not:
- Detection of events on text nodes.
- Determine the position of the text node relative to the window or page.
This answer gives an idea with good understanding, but does not do what you want (return the node index).
I believe you are out of luck unless you find a way to use the above solution to determine the index.
source to share