代码之家 › 专栏 › 技术社区 › Ben Shelock

查找光标当前所在的textNode

jquery javascript

Ben Shelock · 技术社区 · 16 年前

假设我有以下几点。。。

<div id="text">Some text</div>

当我的鼠标经过 Some 一些 将被退回,与 text .

不将每个节点放入自己的元素中,这是否可行?

2 回复 | 直到 16 年前

jAndy 16 年前

这几乎是不可能的。从年起 Javascript element ( div textnode 在这种情况下),你无法知道哪个词是这样悬停的。

也许需要很多努力和一些古怪的黑客 offsets 和/或 event.pageX/Y ,但我会选择你自己提到的解决方案,把每个词都包装成自己的词 要素 .

var $text = $('#text');
$text.html($text.text().replace(/\b(\w+)\b/g, "<span class='word'>$1</span>"));

$('.word').bind('mouseenter', function(e){
   alert($(this).text());
});

James 16 年前

如果不将两个节点包装到元素中,或者不确定文本节点的确切位置,然后绑定到某个父节点,这是不可能的 click 事件。前者更简单。只需将它们包装成跨距:

<div id="text"><span>Some<span> <span>text</span></div>

或者,如果需要自动包装它们:

jQuery.fn.getTextNodes = function(){
    return this.not('script').contents().map(function(){
        var n = this.nodeType;
        return n === 3 ? this : n === 1 ? jQuery(this).getTextNodes().get() : [];
    });
};

jQuery('#text').getTextNodes().replaceWith(function(){
    return jQuery(this.data.replace(/\S+/g, '<span>$&</span>')).filter('span').click(function(){
        alert('You just clicked on the word: ' + jQuery.text([this]));
    }).end();
});â â

演示: http://jsfiddle.net/PYKqM/