2017.10.12 a hrefを無効化する

こんにちは。ライジングサン企画のライアンです。

今回はJavaScript(jquery)とHTMLの話です。
フロントエンドの開発においてボタンの二重押しを防ぐために、ボタン押下処理にすぐdisabled属性をつけるようなことをやっていますが、今回はa hrefリンクに対して、似たようなことをやる必要がありました。

リンクをクリック

実行中の画像を表示

ここでajaxでデータの読み込みや処理をする

処理終了後、(同じ画面の中で)結果を表示

という流れで、実行中に再度リンクをクリックされると、非同期処理が乱れてしまいよくない結果になるという状態でした。

でも、a hrefにはdisabled属性はないし。。
そもそもリンクはクリックするためにあるので、クリックさせたくないってどういうことだ?という。

なるべくコードの変更を抑えてやりたかったので、タグの種類を変えるようなことはせず、何か方法がないか探してみました。

ここはcssでpointer-eventsを使ってみました。

 

それからa hrefに固有のclass=”foo”をつけて、jqueryで

 

クリックできなくなったので、思う存分裏処理を実施。

 

終わってから、また有効化したい場合は設定をクリアする。

 

これで無事動くようにできました。

他にもっといい方法をご存知の方は教えてください!

この記事を書いた人

ジョ ライアン
ジョ ライアンインフラ部 部門長
韓国生まれ オーストラリア育ち 1979年生まれ
オーストラリアの大学を卒業した後、来日。長年大手金融とインターネットサービス企業を中心にテクニカルサポートとインフラ構築に携わる。近年は主にシステムアーキテクトとして活動中。BIと自動化が大好きで、自宅の家計簿をBIで分析し自己満足に浸っている。詳しくはこちら