如何獲取事件的原始文本節點？

例如，我有以下的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

如何獲取事件的原始文本節點？

回答

相關問題