如何获取事件的原始文本节点？

例如，我有以下的HTML如何获取事件的原始文本节点？

<HTML> 
<HEAD> 
<script type="text/javascript"> 
function trackElement(event){ 
    event=event||window.event; 
    var target = event.explicitOriginalTarget||event.srcElement||document.activeElement; 
    var targetText = target.nodeValue||target.innerHTML; 
    alert(targetText); 
} 
</script> 
</HEAD> 
<BODY onclick="trackElement(event)"> 
<div>bbbbbb<div>cccccc</div>dddddddddd<div>eeeeeeeee</div></div> 
</BODY> 
</HTML>

当我点击 “BBBBBB”，

在Firefox上，我得到了 “bbbbbb” 惊动这也正是我的预期。
但在IE中，我得到了 “bbbbbb<div>cccccc</div>dddddddddd<div>eeeeeeeee</div>”

当我点击 “DDDDDDDDDD”，

在Firefox上，我得到了 “dddddddddd” 惊动这正是我期望的是。
但在IE中，我得到了 “bbbbbb<div>cccccc</div>dddddddddd<div>eeeeeeeee</div>”

我怎样才能得到相同的结果与Firefox对IE浏览器？

来源

2009-02-24 user70228

请参阅crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter关于explicitoriginaltarget的评论。

在IE中，您获得了Div元素，第二个元素在其中，这种将div分开的解决方案对您有用吗？ - 剧本是一样的... （这适用于IE和在FF）

<BODY onclick="trackElement(event)"> 
    <div>bbbbbb</div> 
    <div>cccccc</div> 
</BODY>

来源

2009-02-24 07:00:12 Dror

感谢德罗尔，但我想跟踪是没有通过自己生成HTML，我不能指望它可能是什么 – user70228 2009-02-24 09:40:14

那是因为这样你返回的innerHTML而不是财产“的nodeValue”返回null元素节点，这是要去包含一个元素内的整个html代码。在Internet Explorer中，您的目标由event.srcElement分配，因此是元素节点，而它是FF中的文本节点。解决这个问题的方法之一是下面的代码：

function trackElement(event){ 
    event=event||window.event; 
    var targetText; 
    var target = event.explicitOriginalTarget||event.srcElement||document.activeElement;   
    if(target.nodeType==3){ 
     targetText = target.nodeValue  
    }else{  
     targetText = target.firstChild.nodeValue; 
    } 
    alert(targetText); 
}

这样一来，你会返回值，如果你的任务分配了一个文本节点，第一个孩子的文本（这是你在做什么之后）为一个元素节点。

编辑：原来我错了。问题是event.srcElement返回被单击的整个元素（event.explicitOriginalTarget是mozilla特定的）。从那里，你需要检索文本。如果元素中有几个文本，我看不到这么简单的方法。如果只有一个，则需要迭代子节点并显示文本节点。

来源

2009-02-24 07:08:23

谢谢Axelle，但是因为我不能指望html会是什么，所以被点击的文本节点可能不是第一个孩子。 – user70228 2009-02-24 09:38:38

确实，对不起。事实上，event.srcElement检索被单击的_element_。所以我觉得你几乎需要你必须检索的元素才能包含在元素中。我可能是错的，但我不是一个巨大的JS专家。 – 2009-02-24 10:47:47

那么只是子串呢？

<script type="text/javascript"> 
function trackElement(event){ 
    event=event||window.event; 
    var target = event.explicitOriginalTarget||event.srcElement||document.activeElement; 
    var targetText = target.nodeValue||target.innerHTML.substr(0, target.innerHTML.indexOf("<")); 
    alert(targetText); 
} 
</script> 
</HEAD> 
<BODY onclick="trackElement(event)"> 
<div>bbbbbb<div>cccccc<p>Hellooo</p></div></div>

这似乎工作，单击ccccc返回“cccccc”，依此类推。还是我完全错过了这一点？

编辑：你还需要检查元素是否有子元素之前有任何子元素...

来源

2009-02-24 13:23:52 peirix

最后，我用胶印来检查其文本节点被点击如下：

if ($.browser.mozilla) { 
    el = event.originalEvent.explicitOriginalTarget; 
}else{ 
    var parent =event.srcElement; 
    var left = event.pageX; 
    var top = event.pageY; 
    var offset=$(parent).offset(); 
    for(var i=0;i<parent.childNodes.length;i++){ 
     var n = parent.childNodes[i]; 
     if (n.nodeType == 1){ 
      if($(n).offset().top>offset.top){ 
       if($(n).offset().top>top){ 
        el=parent.childNodes[i-1]; 
        break; 
       } 
      }else if($(n).offset().top+$(n).height()>offset.top){ 
       if($(n).offset().left>left){ 
        el=parent.childNodes[i-1]; 
        break; 
       } 
      } 
     } 
     el=n; 
    } 
}

来源

2009-03-06 12:00:23 user70228

如何获取事件的原始文本节点？

回答

相关问题