【jQuery】aタグのリンクを使わずに、要素をクリックして別のURLにジャンプさせる

要素をクリックした時に、ページを強制的に開かせるときのメモ。

何に使うんだよって感じですが、使い方に寄っては「ページからいいね！したらダウンロードページが開きます！」的なものが簡易的に実装できるかもしれません。

まずHTMLです。

HTML

                       div id="enter"      

CSSは省略します。とりあえず。気分が乗らないのでhoverとかを指定しておきました。

ボタンのデモ

見ての通り、aのhrefを指定していないのでジャンプはしません。

このHTMLの状態で、クリックした時に新しいページを開かせる命令を書いてみます。

jQuery

$(function(){            var enter = $('#enter'); //クリック要素      var nowPage = 'https://satohmsys.info'; //ページURL            enter.on('click' , function(event){                            window.open().location.href = nowPage; //代入            ////適当にテキストでも変えとく          $('button' , this).text('ページが開きました→' + nowPage)        });    });

jQueryライブラリを必ず読み込んでください。

変数nowPageに代入されている「https://satohmsys.info」にジャンプさせます。

これは、.onのところをaddEventListenerに変えればいちいちjQueryを使わなくても出来てしまいますね！

ちなみに、「window.open().location.href」だと別ウィンドウで開き、location.hrefでアクティブなウィンドウでページが遷移します。

ボタンをクリックすると、たとえaタグ無しでも新しいウィンドウでページが開くデモ

location.hrefはURLを扱うもので、ここにURLを代入して実行させているだけでOKです！
ちなみにlocationは色々なことが出来ますので少し目を通しておくことをオススメします。
JavaScriptリファレンス – URL情報(location)操作

あと、もし何かの拍子に、ウィンドウが複数開いてしまうなどのトラブルが発生した場合、イベントバブリングが発生しています。

これは、イベントの発生した要素の親要素にも同じイベントが発生してしまうことです。

この場合stopPropagation()を使って、イベントの発生を親要素が感知しないようにします。
「stopPropagation()についてイマイチわからねぇ！」って方は、この記事がオススメです。
ふじこのプログラミング奮闘記

ちょいメモでした。でわ！