Question

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

如何在IE上使用firefox获得相同的结果？

Answer 1

这是因为属性“nodeValue”为元素节点返回null，因此您返回innerHtml，它将包含元素内的整个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返回被单击的整个Element（event.explicitOriginalTarget是特定于mozilla的）。从那里，您需要检索文本。如果元素中有多个文本，我认为没有简单的方法可以做到这一点。如果只有一个，则需要迭代子节点并显示文本节点。

Answer 2

请在crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter中查看有关explicitoriginaltarget的评论。

在IE中你获得了Div元素，第二个元素在其中，这个分离div的解决方案是否适合你？ - 脚本是一样的...... （这在IE和FF中均有效）

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

Answer 3

如何对它进行子串？

<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”，依此类推。还是我完全忽略了这一点？

编辑：您还需要检查元素是否具有任何子元素，然后再对其进行子串...

Answer 4

最后，我使用offset来检查点击了哪个文本节点，如下所示：

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;
    }
}

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

4 个答案: