Question

我的HTML页面上有以下链接，所有链接标记之间都有不同的网址和不同的文字。

<a onmouseover="myFunction()" class="green" href="url.com">word here</a>

myFunction是一个显示单词定义的脚本。我只需弄清楚如何得到这个词。

我希望得到我的鼠标悬停的字样，而不是带有“绿色”类的标签之间页面上的其他字。有没有办法只获取标签之间的当前字词我的老鼠正在盘旋？

Answer 1

只需将节点传递给函数：

<a onmouseover="myFunction(this)" class="green" href="url.com">word here</a>

而且，在你的功能中：

myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('the text is: ' + text);
}

JS Fiddle demo

或者，您可以，如果您愿意，只需传递文字：

<a onmouseover="myFunction(this.innerText || this.textContent)" class="green" href="url.com">word here</a>

这使您的功能可以直接访问文本：

myFunction(elementText){
    console.log('the text is: ' + elementText);
}

JS Fiddle demo

但更好的方法是使用以下方法从内联处理程序中删除事件处理（如果仅为了便于更新/维护）：

function myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('The text is: ' + text);
}

var As = document.links;

for (var i = 0, len = As.length; i<len; i++){
    As[i].onmouseover = function(e){
        myFunction(this);
    };
}

<a class="green" href="url.com">word here</a>

JS Fiddle demo

正如下面的评论所指出的那样，没有必要将函数调用包装在一个匿名函数中，而这个函数允许调用它：

function myFunction(evt){
    var text = this.innerText || this.textContent;
    console.log('The ' + evt.type + ' text is: ' + text);
}

var As = document.links;

for (var i = 0, len = As.length; i<len; i++){
    As[i].onmouseover = myFunction;
}

JS Fiddle demo

或者可能：

function myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('The text is: ' + text);
}

var body = document.body;

body.addEventListener('mouseover',function(e){
    if (e.target.tagName.toLowerCase() == 'a'){
        myFunction(e.target);
    }
}, false);

（上述内容在IE中不起作用，后者使用attachEvent()代替addEventListener()，但没有IE，我无法对IE兼容性进行实验/改进。）

JS Fiddle demo

顺便说一下，我使用了body，因为这是唯一的祖先元素，它将事件绑定到最接近event.target元素的祖先元素的性能更高（更少CPU密集/穷举），因为mouseover或多或少不断激发，正如您可能想象的那样，每次鼠标移动。）

当然，您可以在兼容的浏览器中使用CSS：

<a class="green" href="url.com" data-definition="The definition of the phrase in this attribute..!">word here</a> <!-- note the custom data-* attribute -->

使用CSS：

a {
    position: relative;
    margin: 1em;
}

a:hover::after {
    content: attr(data-definition);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    background-color: #fff; /* Old IE */
    background-color: rgba(255,255,255,0.5);
    width: 8em;
    border: 1px solid #000;
}

JS Fiddle demo

参考文献：

Answer 2

因为您正在使用内联处理程序属性，所以您只需传递所需的属性即可。

<a onmouseover="myFunction(textContent)" class="green" href="url.com">word here</a>

然后在函数上定义一个参数。

function myFunction(txt) {
    alert(txt);
}

DEMO： http://jsfiddle.net/z4Pbj/

如果您愿意，可以改为传递整个元素

<a onmouseover="myFunction(this)" class="green" href="url.com">word here</a>

然后查找属性

function myFunction(el) {
    alert(el.textContent);
}

DEMO： http://jsfiddle.net/z4Pbj/1/

请注意，这演示了这些技巧。根据您支持的浏览器，您可能希望使用不同的属性来兼容。

Answer 3

我将重新提出问题，以确保我理解：您希望有权访问

<element>THIS TEXT</element>

在您的函数中

，以便您可以将其与定义匹配。有多种方法：使用您当前的内联样式，您可以将“this”参数传递给您的函数

<element call=myFunction(this)>Content you want to access</element>

然后，在你的js函数中，你可以使用节点的“.innerText（）”方法访问内部字符串：

function myFunction(elementWithGuts) {
    var whatYouWant = elementWithGuts.innerText();
}

如何获取鼠标悬停的链接文本？

3 个答案: