Question

假设我有以下内容......

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

当我的鼠标移过Some时，将返回Some，与text相同。

如果不将每个节点放入其自己的元素中，这是否可行？

Answer 1

这几乎是不可能的。由于在Javascript中，您只知道您正在element（div和/或textnode处于此情况下），您无法知道哪个词悬停就像那样。

也许在offsets和/或event.pageX/Y上有很多努力和一些令人讨厌的黑客攻击，但我会选择你自己提到的解决方案，将每个单词包装到自己的element中。

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

Answer 2

如果没有将两个节点包装在元素中或以某种方式确定文本节点的确切位置然后绑定到某个父节点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/

查找光标当前所在的textNode

2 个答案: