(翻訳者のメモ:この記事では、CTRLキーを押すとJSを使用して新しいページを開くという問題を解決します)
単純化されたHTML5仕様では、複数のDIVおよび/またはその他のブロックレベル要素をAタグに含めることができます。これで、ブロック要素を<a>タグで包むだけで、javascriptとwindow.locationを呼び出すために元々必要な問題を解決して、ページリダイレクト関数を達成できます。
ただし、<a>タグを使用したこのラッピングフォームもうまく機能していません。たとえば、ブロック要素に<a>タグがいくつかあります。この場合、親の<a>以外の他の部分をクリックするときにのみ、特定のアドレスにジャンプしたいと考えています。
もちろん、以下のようなシンプルなリスナーを使用することも、私たちのニーズを達成することができます。
コードコピーは次のとおりです。
someelement.addeventlistener( 'click'、function(e){
// URLアドレスは問題ありません。または、他のコードを使用して指定できます。
//こちらがこの要素の `src` dom属性です(属性)
window.location = sumeelement.get( 'data-url');
});
...しかし、これは時々悪いユーザーエクスペリエンスを持っています。 Ctrlキー(Macがコマンドキー)を押し続け、マウスをクリックすると、同じ(タブ)ウィンドウでリンクが開きます。この問題があることを知って、あなたはそれを解決する方法を考えたに違いありません。少しコードを変更することでこれを達成できます。リスナーを修正するために時間をかけてください。
コードコピーは次のとおりです。
someelement.addeventlistener( 'click'、function(e){
// urlを取得します
var url = seelement.get( 'data-url');
// Ctrlキーが押されているかどうかを判断します
if(e.Metakey || e.ctrlkey || e.button === 1){
window.open(url);
} それ以外 {
window.location = url;
}
});
元の著者は、この関数をhttp://davidwalsh.name/ Webサイトに実装しています。ページリダイレクトにwindow.locationを使用する場合は、これを覚えておく必要があります。これは小さなコードの改善ですが、使いやすさを向上させることは非常に重要です!