Question

我已经设置了一个自定义主页，链接到Google或维基百科等几个书签。

链接设置为包含特定网站a的{{1}}元素。在href元素中，我添加了a div和class="clickArea"，其中显示了其他onmouseover="overClickArea('page-description')"的简短描述（效果很好）。

此外，它实际上应该将我自己的自定义搜索栏（在网站内）的内容设置为父div标记的href属性的值。搜索栏是a元素。

要获得input值，我会在href指针上使用parentNode和getAttribute('href')。 this函数返回parentNode。

我知道undefined指针指的是函数是方法的元素。
我尝试将this替换为this并将div作为函数参数传递，但未成功。

我很高兴能完成那一个，非常感谢你的帮助:)。

其中一个链接：

this

JavaScript函数：

<a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">
    <div class="clickArea" onmouseover="overClickArea('Wikipedia - The Free Encyclopedia')">
       <img class="icon" src="Icon_Wikipedia.png" alt="Wikipedia" />
       <br>Wikipedia
    </div>
</a>

Answer 1

您可以像这样致电overClickArea：

onmouseover="overClickArea('page-description')"

由于您尚未指定上下文，因此将在默认对象的上下文中调用它。在浏览器中，即window。

您似乎假设它将是onmouseover属性附加到的元素。事实并非如此。

window没有parentNode属性（至少默认情况下）。

在事件处理函数本身（即onmouseover="this"）内，this将是该元素。

Answer 2

this指的是窗口对象，因此它没有父节点。改变它

 <div class="clickArea" onmouseover="overClickArea(this,'Wikipedia - The Free Encyclopedia')">

和：

function overClickArea(source, descStr){
    document.getElementById('description').innerHTML = descStr;

    var url = source.parentNode.getAttribute('href');
    document.getElementById('searchbar').value = url;
}

Answer 3

为了扩展Quentins Answer，要访问元素，而不是在函数中使用this（引用函数本身），您需要event.target并且最好从鼠标悬停处理程序传入

onmouseover="overClickArea(event,'Wikipedia - The Free Encyclopedia')"

然后，在你的函数中接受它，你可以得到你想要的

function overClickArea(event,descStr){

   event = event || window.event;
   var url = event.target.parentNode.getAttribute('href');
    ....

为什么.parentNode在'this'指针上返回'undefined'？

3 个答案: