javascript - 如何使用纯 JavaScript 使整个 div 可点击？

Question

我不需要用 jQuery 编写这个，但我对简单的 javascript 不够熟悉，无法弄清楚它。 Chris Coyier 写了 nice explanation of what I'm talking about here .

我想要转换它的原因是因为我不需要为这段代码包含整个 jQuery 库。我可以使用普通的旧 JavaScript 来保存额外的请求。

这是我要转换的示例代码:

$(document).ready(function() {
    $(".featured").click(function(){
        window.location=$(this).find("a").attr("href"); return false;
    });
});

这是我到目前为止所想到的:

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("div.feature").click(function(){
        window.location=$(this).find("a").setAttribute("href"); 
        return false;
    });
});

据我所知，其中不正确的一件事是 querySelectorAll，它只查找 div 元素，对吧？另一件事是 $(this)，我不知道如何将其转换为纯 JavaScript。

Answer 1

假设...

• 您知道浏览器支持 querySelectorAll 但你仍然使用它
• 那个addEventListener仅适用于符合标准的浏览器

我相信你的意思是:

//get all a's inside divs that have class "featured"
var feat = document.querySelectorAll("div.featured a"),
    featlen = feat.length,
    i;

//loop through each
for(i=0;i<featlen;++i){
    //add listeners to each
    feat[i].addEventListener('click',function(){
        window.location = this.href;
    },false);
}

<小时/>

或者您可以使用 <div>包裹在 <a> 。无需JS。这是完全有效的 HTML，尽管有内联元素不应包含 block 元素的规则，但浏览器确实可以按预期工作。只要确保有 display:block上<a>以及调整其大小。

<a href="location">
    <div> content </div>
</a>