jQuery

[jQuery] aタグのリンクをクリックさせる方法 2019版

経緯

jQueryでは特定の動作をした時に
指定した要素をクリックしたことにするイベント
があります。

ですがaタグのリンクをjQueryのイベントクリックさせたことにしてページ変移をさせたかったのですが、普通にやってもうまくいきませんでした。。

そのままaタグにクリックイベントを付けただけではページ移動が起こらず、解決するまで少しハマったのでやり方を共有します。

クリックしたことにするイベント

jQueryを使ってクリックイベントを発火させるには、以下の方法があります。

ただ、これはあくまでクリック時のイベントを発動させるだけで、実際にクリックするわけでは無いようです。

今回困ったのが、特定の動作に対して
aタグのリンクをクリック=ページを変移させる
をJSだけでやりたかったのですが、上記した click() や trigger(“click”) の書き方ではリンクをクリックしたことにはならず、ページ変移が起きませんでした。

そして、試行錯誤してできた方法がこれになります!

ページ変移させるやり方

で目的のURLを持っているaタグのhref属性からURLを取り出します。

そしてJSで発火する条件を決めて、その条件に合致したときに下記の書き方をします。

これで無事思い通りの動作ができました。

【参考サイト】 javascriptのclickイベントで_selfと_blankのリンク – webdev

使いどころとしてはこんな感じでしょうか。

  • スマホで左右のスワイプ時に前の記事、次の記事へ遷移させる機能を付ける
  • クイズ系のコンテンツで、チェックボックスで特定の組合せにチェックが入ったら正解ページへ遷移させる
  • HTMLの修正ができない環境で、JSだけでなんとかページ遷移をゴニョゴニョしないといけない

追記:この方法がベストです

2019.4.20追記

上記の方法だとGoogle Analyticsで不具合が出ることがいくつかありました。
なのでこちらの方法がベストかと思います。

【参考サイト】 jQueryでリンクをクリックさせたい時 – Qiita

このコードを動作させたいイベントなどに組み込んでもらうと動くと思います。

サンプル

リンクを設定していないテキストにイベントを仕込んで、イベント発火したら別のaタグのhrefリンクに飛ばしてみます。

取扱注意!

これは使い方を間違えるとユーザーの予期せぬタイミングで行きたくもなかったページに移動させられてしまいます。

使いドコロには気をつけて下さい。

以上、 @dutchisover でした!