(翻訳者注: この記事は、JS を使用して Ctrl キーを押したときに新しいページを開く問題を解決します)
簡略化された HTML5 仕様では、ブロック要素が で囲まれている限り、複数の DIV やその他のブロックレベルの要素を含めることができます。 JavaScript を使用してリッスンし、window.location を呼び出してページ ジャンプ (リダイレクト) 機能を実装する問題。
しかし、 タグを使用するこのパッケージ化形式がうまく機能しない状況もあります。たとえば、特定のブロック要素 (ブロック) にいくつかの タグが存在します。 を除く親の他の部分をクリックした場合にのみ、指定されたアドレスにジャンプします。
もちろん、次のような単純なリスナーでもニーズを達成できます:
someElement.addEventListener('click', function(e) {
// URL アドレスは任意のものにすることも、他のコードを使用して指定することもできます。
// 要素の `data-src` DOM 属性がここで使用されます (属性)
window.location = someElement.get('data-url');
});
…しかし、CTRL キー (Mac では COMMAND キー) を押しながらマウスをクリックすると、同じ (タブ) ウィンドウでリンクが開かれるため、ユーザー エクスペリエンスが低下することがあります。この問題があることを知って、急いで時間をかけてリスナーを修復することで、その解決方法を考えたはずです。
someElement.addEventListener('click', function(e) {
// URLを取得
var url = someElement.get('データ URL');
// CTRL キーが押されたかどうかを判断します
If(e.metaKey || e.ctrlKey || e.button === 1) {
window.open(url);
} else {
window.location = url;
}
});
元の作成者は、この関数を http://davidwalsh.name/ Web サイトに実装しました。ページのリダイレクトに window.location を使用する場合にも、このことを覚えておく必要があります。これは小さなコードの改善ですが、使いやすさにおいては非常に重要な改善です!