*

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

公開日: : 最終更新日:2015/08/03 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属性に指定して
おけばユーザーは情報はつかめます。

スポンサードリンク

関連記事

catejQuery

空間を最大限に使いトップページの画像をタブで切り替える。

今回、書くのは、 トップページに複数の作品を乗せたいときに、 スクロールさせず、画面上部に配置し

記事を読む

catejQuery

パンくずメニューをスライドさせて表示させる。

今回作成するのは、 パンくずリストに動きをつけて表示させる jQueryを作成します。 サ

記事を読む

catejQuery

イベントが発生した要素を取得する

イベントを設定したい要素はひとつとは限らない場合が 多々あります。 今回は、eqセレクターを

記事を読む

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

catejQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた テーブルの事です。偶数行(列)、奇数行

記事を読む

catejQuery

表示・非表示をスライドで交互に切り替える slideToggle()

slideToggle()は、toggle()を スライドアニメーションにしたものです。 セレク

記事を読む

catejQuery

処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の HTML要素を指定して、CSSやHTMLを変更・

記事を読む

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。 サンプルコード

記事を読む

catejQuery

イベント発生時に一度だけ処理を行うone()

この命令は、指定した要素で発生したイベントに対して、 一度だけ実行する処理を設定します。 o

記事を読む

jQuery

Masonryのギャラリーの画像にホバーしたときに動きを付けてみる

今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがで

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑