スポンサーリンク
スポンサーリンク

クリックしたことを感知するclick()

jQuery

click()命令はready()と同様に、括弧内のfunction(){…}と記述し
その内側に実行したい処理を書きます。

$( セレクター ).click(function(){
セレクターで指定した要素がクリックされたときの処理
});

サンプルコードをコピーして実行すると、
「ここをクリックすると・・・」とブラウザに表示されていて
クリックすると「click!」という文字が出ます。それを何度も
押すとさらに「click!」という文字が出るという簡単なものです。

<p>タグで囲まれた「ここをクリックすると・・・」を
クリックすると<p>タグで囲まれた範囲の後ろから
「click!」というテキストを追加する処理を入れています。

実行結果はこちらです。

a要素にclick()を設定したら・・・

この記事を書いていて気が付いたのですが、
click()はクリックしたときの処理を書けますが、
もともと「クリックしたら href属性に書かれたリンク
先にとぶ」機能があるa要素をセレクターに指定すると
何が起こるのか・・・

実際にやってみました。

サンプルコードを実行すると、
黒猫の画像が表示されています。

「Googleへ飛ぶ」をクリックすると、イベントが発生し、
jQueryの命令が実行されます。ですが、その直後にブラウザーは
a要素のhref属性に指定されたURLを開いてしまいます。

その問題への解決案としては、サンプルコードの
33行目のように「return false;」と書きます。

この場合は、jQueryの命令だけが実行されて、hred属性に
書かれたURLへはジャンプしません。javaScriptがオフの場合は、
a要素に指定されてたリンクが有効になるので、
jQueryの命令で指定している内容に近いURLをhref属性に指定して
おけばユーザーは情報はつかめます。

コメント

タイトルとURLをコピーしました