87

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

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)」? .

4

7 に答える 7

69

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

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
于 2008-10-29T05:35:58.320 に答える
10

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

于 2008-10-29T05:24:44.740 に答える
5

別の方法を忘れました：

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

JavaScript コードの場合:

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

どのオプションが最もサポートされているか、または意味的に最も優れているかについてコメントすることはできませんが、JavaScript コードからコンテンツを分離するため、このスタイルが非常に好きであるとだけ述べておきます。これにより、すべての JavaScript コードがまとめられるため、保守がはるかに容易になります (特に、これを多くのリンクに適用する場合)。外部ファイルに配置することもできます。このファイルは、圧縮してファイルサイズを縮小し、クライアント ブラウザーによってキャッシュされます。

于 2008-10-29T05:25:20.353 に答える
3 
<a href="#" onClick="DoSomething(); return false;">link</a>

私はこれを行います、または：

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

状況によります。大規模なアプリの場合、イベント コードが統合されるため、2 番目の方法が最適です。

于 2008-10-29T05:25:29.823 に答える
1

最新のブラウザのみ

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

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

ソース:

于 2014-06-01T07:26:17.850 に答える
1

方法 #2 は FF3 と IE7 で構文エラーがあります。#4 は「#」で URI をダーティにするため、メソッド #1 と #3 を好みますが、入力は少なくなります...明らかに、他の応答で指摘されているように、最良の解決策はイベント処理とは別の html です。

于 2008-10-29T07:19:58.127 に答える