【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>
————————————————-
「青年」をクリックすると「青年」だけ、その他の文字列をクリックすると「ある青年の主張」というアラートをそれぞれ一度だけアラートするには。
方法１
バブリングを止める
————————————————-
<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 で親要素へのイベントの伝播を止めている
方法２
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要素を返すプロパティ。
