我的 HTML 页面上有以下链接,所有链接标签之间都有不同的 url 和不同的文本。
<a onmouseover="myFunction()" class="green" href="url.com">word here</a>
myFunction 是一个显示单词定义的脚本。我只需要弄清楚如何得到这个词。
我想得到我的鼠标悬停在上面的单词,而不是页面上带有“绿色”类的标签之间的其他单词。有没有办法在我的鼠标所在的标签之间获取当前单词悬停?
我的 HTML 页面上有以下链接,所有链接标签之间都有不同的 url 和不同的文本。
<a onmouseover="myFunction()" class="green" href="url.com">word here</a>
myFunction 是一个显示单词定义的脚本。我只需要弄清楚如何得到这个词。
我想得到我的鼠标悬停在上面的单词,而不是页面上带有“绿色”类的标签之间的其他单词。有没有办法在我的鼠标所在的标签之间获取当前单词悬停?
只需将节点传递给函数:
<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);
}
或者,如果您更喜欢简单地传递文本,则可以:
<a onmouseover="myFunction(this.innerText || this.textContent)" class="green" href="url.com">word here</a>
这使您的函数可以直接访问文本:
myFunction(elementText){
console.log('the text is: ' + elementText);
}
不过,更好的是从内联处理程序中删除您的事件处理,如果只是为了便于更新/维护,请使用以下方法:
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>
正如下面的评论中所指出的,没有必要将函数调用包装在匿名函数中,而是允许像这样调用:
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;
}
或者可能:
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 兼容性。)
顺便说一句,我使用了 ,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;
}
参考:
因为您使用的是内联处理程序属性,所以您可以只传递您想要的属性。
<a onmouseover="myFunction(textContent)" class="green" href="url.com">word here</a>
然后在你的函数上定义一个参数。
function myFunction(txt) {
alert(txt);
}
演示:http: //jsfiddle.net/z4Pbj/
如果您愿意,可以改为传递整个元素
<a onmouseover="myFunction(this)" class="green" href="url.com">word here</a>
然后查找属性
function myFunction(el) {
alert(el.textContent);
}
演示:http: //jsfiddle.net/z4Pbj/1/
请注意,这演示了这些技术。根据您支持的浏览器,您可能希望使用不同的属性来实现兼容性。
我将改写问题以确保我理解:您想访问
<element>THIS TEXT</element>
在您的函数中,以便您可以将其与定义匹配。有多种方法:使用您当前的内联样式,您可以将“this”参数传递给您的函数
<element call=myFunction(this)>Content you want to access</element>
然后,在您的 js 函数中,您可以使用节点的“.innerText()”方法访问内部字符串:
function myFunction(elementWithGuts) {
var whatYouWant = elementWithGuts.innerText();
}