【jQuery】アラートを一回だけ出す

【jQuery】アラートを一回だけ出す

これで↓「青年」をクリックすると「青年」「ある青年の主張」とアラートが二度出てしまう。
————————————————-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(document).on(“click”, “span”, function() {

var get_txt = $(this).text();

alert(get_txt);

});
});
</script>
</head>
<body>
<span>ある<span>青年</span>の主張</span>
</body>
</html>
————————————————-

「青年」をクリックすると「青年」だけ、その他の文字列をクリックすると「ある青年の主張」というアラートをそれぞれ一度だけアラートするには。

方法1
バブリングを止める
————————————————-
<script type=”text/javascript”>
$(document).ready(function(){

$(document).on(“click”, “span”, function(e) {

var get_txt = $(this).text();

alert(get_txt);
e.stopPropagation(e);

});
});
</script>
————————————————-
stopPropagation で親要素へのイベントの伝播を止めている

方法2
event.target を使う
————————————————-
<script type=”text/javascript”>
jQuery(document).on(‘click’, function (event) {
var target = event.target;

if (target.tagName === ‘SPAN’) {
alert(target.textContent);
}
});
</script>
————————————————-

event.targetは、イベントバブルのイベントを開始したDOM要素を返すプロパティ。

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