ブラウザのサポートを確認するときの不正なreturn文

Question

ブラウザがDOM機能のいくつかをサポートしているかどうかをチェックする、Ethan Marcotteの次のコードを使用しています。

// Is this browser sufficiently modern to continue? 
if (!("querySelector" in document 
    && "addEventListener" in window 
    && "getComputedStyle" in window)) { 
    return; 
} 
window.document.documentElement.className += " enhanced"; 

var nav = document.querySelector(".nav ul"), 
navToggle = document.querySelector(".nav .skip"); 
if (navToggle) { 
    navToggle.addEventListener("click", function(e) { 
    if (nav.className == "open") { 
     nav.className = ""; 
    } else { 
    nav.className = "open"; 
    } 
    e.preventDefault(); 
    }, false); 
} 

開発ツールが次のエラーを報告しています。

キャッチされないでSyntaxError：不正return文

私は偽への復帰を変更しようとしたが、それは動作しませんでした。基本的に、それらのDOM機能が見つかった場合、拡張されたクラスをhtmlタグに追加することになっています。誰かが私が間違っている場所を助けることができるかどうか疑問に思った。

ありがとうございました。

Answer 1

私はロード機能ですべてのコードを挿入するように提案する：

window.onload = function() { 
 
    if (!("querySelector" in document 
 
     && "addEventListener" in window 
 
     && "getComputedStyle" in window)) { 
 
    return; 
 
    } 
 
    window.document.documentElement.className += " enhanced"; 
 

 
    var nav = document.querySelector(".nav ul"), 
 
     navToggle = document.querySelector(".nav .skip"); 
 
    if (navToggle) { 
 
    navToggle.addEventListener("click", function (e) { 
 
     if (nav.className == "open") { 
 
     nav.className = "close"; 
 
     } else { 
 
     nav.className = "open"; 
 
     } 
 
     e.preventDefault(); 
 
    }, false); 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav nav-pills nav-stacked"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li class="dropdown"> 
 
     <a class="skip dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Submenu 1-1</a></li> 
 
      <li><a href="#">Submenu 1-2</a></li> 
 
      <li><a href="#">Submenu 1-3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 2</a></li> 
 
    <li><a href="#">Menu 3</a></li> 
 
</ul>