ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript では、Ctrl キーを押して新しいページを開くように実装されています_javascript スキル

JavaScript では、Ctrl キーを押して新しいページを開くように実装されています_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 16:37:271975ブラウズ

(翻訳者注: この記事は、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 を使用する場合にも、このことを覚えておく必要があります。これは小さなコードの改善ですが、使いやすさにおいては非常に重要な改善です!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。