内部アクションとajaxリクエストのリンクを区別する最も良い方法は？

Question

thisトピックは学際的です（しかし、まだユーザーエクスペリエンスに関するものです）。私はこのことについてjavacript開発者を考えるとcuriuosです。

私のサイトの処理ahrefで始まるタグは、#で始まり、ajaxリクエストとして処理されます。リクエストが正常に行われた場合は、ドキュメントハッシュを適切に変更します。今では、サイトのトップに行くような内部js関数を呼び出すアクションリンクを実装したいと思いますが、ほとんどのブラウザでリンクを参照しているときに参照URLを示すヒントが表示されているので、javascript:myAction()参照は不要です。私は恐らくaction:myActionのような独自のURLスキーマを使うことができますが、十分な解決策ではありません。ユーザーは依然として魔法のURLについてヒントを得ていました。別のオプションは、hrefのカスタム属性をカスタム文字列として使用しています。たとえば、action="myAction"などです。 href="Go to top"でも、ブラウザの互換性はどうですか？最後の解決策は、URLについては暗示されていませんが、これはリンク機能の一部です（デフォルトのURLに行く）。

何が良いの？なぜですか？

Answer 1

<script> 
if(window.addEventListener)//Chrome, Firefox and Safari 
    document.getElementById('myLink').addEventListener('click',function(e){ 
     var e = e || event; 
     e.preventDefault(); 
     window.location = destiny; 
    }); 
else//IE and Opera 
    document.getElementById('myLink').attachEvent('onclick',function(e){ 
     var e = e || event; 
     e.preventDefault(); 
     window.location = destiny; 
    }); 
</script> 
<a href="#" id="myLink">Link</a> 

Answer 2

最初にリンクを作成する必要があります。without JavaScript。次に、誰かが<a href='/customers'>Customers!</a>をクリックすることについて心配する必要はありません。それはうまく動作し、アクセス可能です。この点に達すると、ユーザーエクスペリエンスを高めるためにJavaScriptを一番上に置きます。あなたはこれらのすべてをフックどのようにあなた次第です - あなたは一般的な方法で削除を処理したいと言う、あなたはこのように見えるリンクが持っているかもしれません：

<a href='/customers/2' class='delete'>Delete customer</a> 

<a href='/customers/2' data-action='delete'>Delete customer</a> 

それともリンクあたりの特定だ場合、あなたはIDを設定しますそのように配線してください：

<a href='/customers/2' id='delete'>Delete customer</a> 

この配線は、すべて外部のJavaScriptファイルで行う必要があります。

Answer 3

私が最初にJSのないユーザーはDOMがロードされた後、私はすぐにそれを高めるために、JSを取るだろう

<a href="#" title="Go to the top of the page">Go to top</a> 

のように、それを使用することができますように、すべてのものを書くことで、これを行うだろう。最初にonclickイベントを追加し、hrefを削除して、リンクヒント（リンク以外のコンテンツはバリデータを渡していない可能性があります）と、カーソルがホバー上のポインタになる新しいスタイル属性を削除します。

非常に役に立ちますprogrammatic progressive enhancement structureの一部です。このようにして、私は有効で互換性のあるコードと快適な動作を得ることができます。