質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

11105閲覧

alertを一回だけ出したい

tara_popore

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/03/10 12:40

編集2017/03/16 05:33

###実現したいことと発生している問題

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<script type="text/javascript"> 6$(document).ready(function(){ 7 8$(document).on("click", "span", function() { 9 10var get_txt = $(this).text(); 11 12alert(get_txt); 13 14}); 15}); 16</script> 17</head> 18<body> 19<span>あいうえ<span>おかき</span>くけこ</span> 20</body> 21</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

1回alertを出した後にe.stopPropagation()を呼んで、バブリングを止める必要があります。

javascript

1$(document).on("click", "span", function(e) { 2 3var get_txt = $(this).text(); 4 5alert(get_txt); 6e.stopPropagation(); 7 8});

投稿2017/03/10 12:44

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

バブリング停止のデメリット

バブリング停止は解決方法の一つですが、バブリングを停止すると他のイベント発生も抑制されてしまう欠点があります。

単一イベントで管理する

しかけるイベントを一つにすれば、バブリングを気にする必要はなくなります。

HTML

1<span>あいうえ<span>おかき</span>くけこ</span> 2<script> 3'use strict'; 4jQuery(document).on('click', function (event) { 5 var target = event.target; 6 7 if (target.tagName === 'SPAN') { 8 console.log(target.textContent); 9 } 10}); 11 12jQuery(document).on('click', function (event) { // こちらのイベント発生が抑制されない 13 console.log(event.target.tagName); 14}); 15</script>

投稿2017/03/11 14:35

編集2017/03/11 14:36
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

maisumakunさんの回答で問題ないですが、
他の方法として、
イベントをspanに対して付与してますが、
<span>が2重になっているため、1回のクリックで、2つのspanが反応してしまっている状態なのだと思います。
spanにidを付与して、

$(document).on("click", "span#tgt01", function() {

のようにして、セレクターで回避するのが良いかと思います。

投稿2017/03/11 02:21

yohe32

総合スコア76

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2017/03/11 02:30

「おかき」以外の文字列をクリックしたときは「あいうえおかきくけこ」と alert を出したい、ということなので、結局両方にイベントは必要となってしまいます。
yohe32

2017/03/11 02:37

なるほどちゃんと読んでいませんでした。 maisumakunさんの回答が正解ですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問