ユーザー体験の充実:windowを活用する.locationとwindow.Openページジャンプの問題の解決
1240 ワード
原文アドレス:JavaScript Redirects and window.open
原文日付:2014年08月27日
2014年08月31日
アンカー
簡略化されたHTML 5仕様では、Ctrlキーを押すときにJSを使用して新しいページを開く問題を解決します.
Aタグ内に複数含む
DIVおよび/または他のブロックレベル要素.今はただ
ラベルがブロック要素を包むと、JavaScriptでリスニングして呼び出す必要があった
window.locationはページジャンプ機能を実現する.
ただし、
ラベルのこのような包装形式も使いにくい場合があります.例えば、あるブロック要素内にラベル、この場合はparentをクリックしたいだけです。 以外の部分は、指定されたアドレスにジャンプします。 もちろん、以下のように簡単なlistenerでも私たちのニーズを実現できます。 someElement.addEventListener('click', function(e) { //URLアドレスは何でもいいし、他のコードで指定することもできます。 //ここでは、この要素の`data-src`DOM属性(attribute)を使用します。 window.location = someElement.get('data-url'); }); ...しかし、CTRLキー(MacはCOMMANDキー)を押してマウスでクリックすると、同じ(ラベルページ)ウィンドウでリンクが開きます。この問題があることを知って、あなたはきっとどのように解決するべきかを考えたに違いない。コードを少し修正すればこの目的を達成できます。早く時間をかけてlistenerを修復しましょう。 someElement.addEventListener('click', function(e) { //URL取得 var url = someElement.get('data-url'); //CTRLキーを押したか否か判断 if(e.metaKey || e.ctrlKey || e.button === 1) { window.open(url); } else { window.location = url; } }); 原文の作者はすでにhttp://davidwalsh.name/サイトではこの機能を実現し、 window.locationがページのリダイレクトを行うときも覚えておくべきです。これは小さなコード改善ですが、可用性の向上には非常に重要です。もあります.
原文日付:2014年08月27日
2014年08月31日
アンカー
簡略化されたHTML 5仕様では、Ctrlキーを押すときにJSを使用して新しいページを開く問題を解決します.
Aタグ内に複数含む
DIVおよび/または他のブロックレベル要素.今はただ
ラベルがブロック要素を包むと、JavaScriptでリスニングして呼び出す必要があった
window.locationはページジャンプ機能を実現する.
ただし、
ラベルのこのような包装形式も使いにくい場合があります.例えば、あるブロック要素内にラベル、この場合はparentをクリックしたいだけです。 以外の部分は、指定されたアドレスにジャンプします。 もちろん、以下のように簡単なlistenerでも私たちのニーズを実現できます。 someElement.addEventListener('click', function(e) { //URLアドレスは何でもいいし、他のコードで指定することもできます。 //ここでは、この要素の`data-src`DOM属性(attribute)を使用します。 window.location = someElement.get('data-url'); }); ...しかし、CTRLキー(MacはCOMMANDキー)を押してマウスでクリックすると、同じ(ラベルページ)ウィンドウでリンクが開きます。この問題があることを知って、あなたはきっとどのように解決するべきかを考えたに違いない。コードを少し修正すればこの目的を達成できます。早く時間をかけてlistenerを修復しましょう。 someElement.addEventListener('click', function(e) { //URL取得 var url = someElement.get('data-url'); //CTRLキーを押したか否か判断 if(e.metaKey || e.ctrlKey || e.button === 1) { window.open(url); } else { window.location = url; } }); 原文の作者はすでにhttp://davidwalsh.name/サイトではこの機能を実現し、 window.locationがページのリダイレクトを行うときも覚えておくべきです。これは小さなコード改善ですが、可用性の向上には非常に重要です。もあります.