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

Question

我设置了一个自定义主页，链接到一些书签，例如 Google 或维基百科。

链接设置为包含特定站点的 href 的 a 元素。在 a 元素中，我放置了一个带有 class="clickArea" 和 onmouseover="overClickArea('page-description' )"，它在其他一些 div 中显示简短的描述(效果很好)。

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

要获取该 href 值，我在 this 上使用 parentNode 和 getAttribute('href')指针。不过，parentNode 函数返回 undefined。

我知道 this 指针指向该函数所属的元素。
我尝试用 div 替换 this 并将 this 作为函数参数传递，但没有成功。

我很高兴能完成这个任务，非常感谢您的帮助:)

链接之一:

<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>

JavaScript 函数:

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

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

Answer 1

您可以像这样调用overClickArea:

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

由于您没有指定上下文，因此它将在默认对象的上下文中调用。在浏览器中，即窗口。

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

window 没有 parentNode 属性(至少默认情况下如此)。

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