jQueryのclick()は・・・
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ jsの click() とは違って実際にクリックしたことにはなりません
◆ jQuery以外でつけたイベント実行したりクリック自体を起こさせたいなら .get(0).click() でHTMLの要素に対してクリックメソッドを実行
◆ jQuery以外でつけたイベント実行したりクリック自体を起こさせたいなら .get(0).click() でHTMLの要素に対してクリックメソッドを実行
ちょっと使っただけで色々jQueryで記事を書くこと出てきます
おかしなところや使いづらいところが多いってことですね
基本的にこのブログは何か問題あったときの解決策メモなので良い部分じゃなくて悪い部分が多いと思います
一応初心者向けなつもりなので 複雑そうな記事だと関係しそうな基本的な説明を別ページで書いてたりするのが 対策方法系じゃなくて説明系な記事になってるわけです
jsでHTMLの要素に対してclick() メソッドを実行するとその要素をクリックしたことになります
aタグだとhrefのページに飛んだり javascript実行したりメール画面開いたりできますし クリックにイベントリスナをつけている要素だとイベントが発火されます
ただし セキュリティのためかクリックイベントで実行される関数(その関数から実行される関数でもいい)外で click() を実行しても何も起きません
クリックイベントの関数中なら そのクリックされた要素以外でも 新しくaタグを作ってbodyの最後に追加して それをクリックしたことにもできます
jQueryにも click() があります
jsのと同じものでわざわざHTMLの要素を取り出さないでjQueryオブジェクトのままできるようにしてくれてるのだと思ってました
しかし 使ってみると全く反応しません
jQueryでつけたイベントだけを実行してるのかな と思いましたが気になったのでリファレンス(ドキュメント?)を見てみました
公式
https://api.jquery.com/click/
日本語はこっち
http://js.studio-kingdom.com/jquery/events/click
関数を渡して クリック時のイベントを設定するものらしいです
.click(fn) は .on("click", fn) と同じことをしてるようです
ん? 全然別物?
jQueryの on でつけたイベントは実行されていたような…と思ってソースさっと見てみると trigger を呼んでるみたいだったのでクリック時に設定したイベントは実行されてるはずです
……あれ? と思いましたが リファレンスをよく見ると下の方に小さめに 引数なしのときはtriggerすると書いてました
HTML要素のclick()メソッドも実行してくれていいのに なんでしてないんだろうと思いながら ソースから 「.click()」 を検索してみると僅かですが引っかかりました
その行にブレイクポイントつけて click() を実行してみると途中でストップしました
え click() 呼んでたの?
もうちょっとちゃんと見てみると checkbox の input タグしか click() は実行しないようです
なんでそんな条件を……
inputタグよりaタグのほうがクリックして欲しいと思うんです
とりあえず jQueryの click() はtriggerだけなのでjQueryでつけたイベントだけじゃなくてHTMLの要素の click()と同じ動作をして欲しいときは .get() で要素を取り出して .click() する必要があります
そうすると メソッドチェインができなくなるデメリットがあるので拡張で
実際 minifyじゃない方で同じ場所見ればコメントや本来の変数名もあってわかりやすいはずです
また 便利と言われるソースマップも実は全く使ってないです
昔からminify済みの読んでたので読み慣れてるのもありますが 自分でもコメントなしでaとかbみたいな変数名のことも多いので意外とけっこう見慣れてるのかもしれないです
あと 他人の作ったminify済みライブラリはめったに使わないので いちいちminifyを戻すっていう習慣がないというのもあります
でもさすがにjQueryは見づらいのでjQueryのコード見る時くらいはソースマップ使おうかな
おかしなところや使いづらいところが多いってことですね
基本的にこのブログは何か問題あったときの解決策メモなので良い部分じゃなくて悪い部分が多いと思います
一応初心者向けなつもりなので 複雑そうな記事だと関係しそうな基本的な説明を別ページで書いてたりするのが 対策方法系じゃなくて説明系な記事になってるわけです
jsのclick()
jsでHTMLの要素に対してclick() メソッドを実行するとその要素をクリックしたことになります
aタグだとhrefのページに飛んだり javascript実行したりメール画面開いたりできますし クリックにイベントリスナをつけている要素だとイベントが発火されます
ただし セキュリティのためかクリックイベントで実行される関数(その関数から実行される関数でもいい)外で click() を実行しても何も起きません
クリックイベントの関数中なら そのクリックされた要素以外でも 新しくaタグを作ってbodyの最後に追加して それをクリックしたことにもできます
jQueryのclick()
jQueryにも click() があります
jsのと同じものでわざわざHTMLの要素を取り出さないでjQueryオブジェクトのままできるようにしてくれてるのだと思ってました
しかし 使ってみると全く反応しません
jQueryでつけたイベントだけを実行してるのかな と思いましたが気になったのでリファレンス(ドキュメント?)を見てみました
公式
https://api.jquery.com/click/
日本語はこっち
http://js.studio-kingdom.com/jquery/events/click
関数を渡して クリック時のイベントを設定するものらしいです
.click(fn) は .on("click", fn) と同じことをしてるようです
ん? 全然別物?
jQueryの on でつけたイベントは実行されていたような…と思ってソースさっと見てみると trigger を呼んでるみたいだったのでクリック時に設定したイベントは実行されてるはずです
……あれ? と思いましたが リファレンスをよく見ると下の方に小さめに 引数なしのときはtriggerすると書いてました
HTML要素のclick()メソッドも実行してくれていいのに なんでしてないんだろうと思いながら ソースから 「.click()」 を検索してみると僅かですが引っかかりました
その行にブレイクポイントつけて click() を実行してみると途中でストップしました
え click() 呼んでたの?
もうちょっとちゃんと見てみると checkbox の input タグしか click() は実行しないようです
なんでそんな条件を……
inputタグよりaタグのほうがクリックして欲しいと思うんです
とりあえず jQueryの click() はtriggerだけなのでjQueryでつけたイベントだけじゃなくてHTMLの要素の click()と同じ動作をして欲しいときは .get() で要素を取り出して .click() する必要があります
そうすると メソッドチェインができなくなるデメリットがあるので拡張で
$.fn.extend({
rawclick : function(){
this.each(function(i, e){
e.click()
})
}
})
としておいたほうが使いやすいかもしれないですその他
いつも予想外の挙動に出会って調べるのがminifyされてる環境なのでそのままminifyされたのをChromeの開発環境でインデントだけ整えて読んでます実際 minifyじゃない方で同じ場所見ればコメントや本来の変数名もあってわかりやすいはずです
また 便利と言われるソースマップも実は全く使ってないです
昔からminify済みの読んでたので読み慣れてるのもありますが 自分でもコメントなしでaとかbみたいな変数名のことも多いので意外とけっこう見慣れてるのかもしれないです
あと 他人の作ったminify済みライブラリはめったに使わないので いちいちminifyを戻すっていう習慣がないというのもあります
でもさすがにjQueryは見づらいのでjQueryのコード見る時くらいはソースマップ使おうかな