web-dev-qa-db-ja.com

JavaScriptコードを<a>に挿入するさまざまな方法の違いは何ですか？

JavaScriptコードを_<a>_タグに配置する次の方法を見てきました。

_function DoSomething() { ... return false; }
_
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

ユーザーがJavaScriptを有効にしていない場合に備えて、JavaScriptコードだけでなく有効なURLを配置しようとする考えを理解しています。ただし、この説明のために、JavaScriptが有効になっていることを前提とする必要があります（JavaScriptがないとログインできません）。

私は個人的には、オプション2が好きです。何が実行されるのかを見ることができるからです。特に、関数に渡されるパラメーターがある場所をデバッグするときに役立ちます。私はそれをかなり使いましたが、ブラウザの問題は発見していません。

私は、人々が従うべき本当のリンクを与えるので、人々が4を推薦することを読みました、しかし、実際、＃は「本当」ではありません。どこにも行きません。

ユーザーがJavaScriptを有効にしていることがわかっている場合、サポートされていない、または本当に悪いものはありますか？

関連する質問：JavaScriptリンクのHref：「＃」または「javascript：void（0）」？。

javascripthtmlhref
82
Darryl Hein

Matt KruseのJavascript Best Practicesの記事 をとても楽しんでいます。その中で、彼はhrefセクションを使用してJavaScriptコードを実行するのは悪い考えだと述べています。ユーザーはJavaScriptを有効にする必要があると述べましたが、誰かがたまたまイベントに参加したときにhrefセクションのすべてのJavaScriptリンクがポイントできる単純なHTMLページを作成できない理由はありません。ログイン後にJavaScriptをオフにします。このフォールバックメカニズムを引き続き許可することを強くお勧めします。このような何かが「ベストプラクティス」に準拠し、目標を達成します。

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
66
cowgod

addEventListener/attachEventを使用できるのに、なぜこれを行うのですか？同等のhrefがない場合は、<a>を使用せず、<button>を使用し、それに応じてスタイルを設定します。

10
eyelidlessness

別の方法を忘れました：

5: <a href="#" id="myLink">Link</a>

JavaScriptコードの場合：

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

どのオプションが最高のサポートを持っているか、どちらがセマンティック上最高であるかについてコメントすることはできませんが、JavaScriptコードからコンテンツを分離するため、このスタイルを好むとだけ言います。すべてのJavaScriptコードをまとめて保持するため、メンテナンスがはるかに簡単です（特に、これを多くのリンクに適用する場合）。さらに、ファイルサイズを小さくするために圧縮してクライアントブラウザーでキャッシュできる外部ファイルに配置することもできます。

4
nickf
<a href="#" onClick="DoSomething(); return false;">link</a>

これを行うか、または：

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

状況に応じて。大規模なアプリの場合、イベントコードを統合するため、2番目のアプリが最適です。

3
user19302

方法＃2には、FF3およびIE7で構文エラーがあります。私はメソッド＃1と＃3を好みます。なぜなら、＃4はタイプを少なくしますが '＃'でURIを汚すからです...明らかに、他の応答で指摘されているように、最良の解決策はHTMLをイベント処理から分離することです。

1
Pier Luigi

最新のブラウザのみ

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

クロスブラウザ

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

ドキュメントを準備する前にこれを実行できます。イベントをドキュメントに添付するため、ボタンをクリックすると機能します。

ソース：

1
Timo Huovinen

私はこれの間に気づいた1つの違い：

<a class="actor" href="javascript:act1()">Click me</a>

この：

<a class="actor" onclick="act1();">Click me</a>

どちらの場合でもあなたが持っている場合です：

<script>$('.actor').click(act2);</script>

最初の例では、act2はact1の前に実行され、2番目の例では、逆に実行されます。

1
JoelFan