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和浏览器确实按预期工作，尽管内联元素不应包含块元素的规则。只需确保在display:block上<a>并调整其大小。

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

Answer 2

您可以选择this.querySelectorAll(...)：

IE8：

window.onload = function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].onclick = function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        };
    }
};

IE9和其他当前浏览器：

document.addEventListener("DOMContentLoaded", function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].addEventListener('click', function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        });
    }
});

=== UPDATE ===

对于IE7支持，您应该先添加以下（未经测试的）脚本（另请参阅here）：

(function(d){d=document,a=d.styleSheets[0]||d.createStyleSheet();d.querySelectorAll=function(e){a.addRule(e,'f:b');for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)l[b].currentStyle.f&&c.push(l[b]);a.removeRule(0);return c}})()

它可能只支持document.querySelectorAll而非element.querySelectorAll。

如何使用普通的javascript使整个div可点击？

2 个答案: