この記事について
| 環境 | jQuery |
|---|---|
| 目的 | 入れ子になった span のクリックでアラートが2回出るのを1回にする |
| 結果 | stopPropagation か event.target で解決 |
つまずきポイント要約
- 入れ子要素ではイベントバブリングで親のハンドラも発火する
【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要素を返すプロパティ。
