仅触发嵌套元素中的单击事件

Question

我有以下设置来显示评级星：

$( document ).on( 'click touch', '.rate', function() {
   alert( $(this).data('rate') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <span class="rate" data-rate="1">1
        <span class="rate" data-rate="2">2
             <span class="rate" data-rate="3">3
                 <span class="rate" data-rate="4">4
                     <span class="rate" data-rate="5">5
                    </span>
                </span>
            </span>
        </span>
    </span>

如果您点击的数字高于1，则会触发多个事件。

原因很明显是因为嵌套元素。我的问题是，如果用户点击某个数字，我怎么能这样做，它只会触发那个事件...... 而不更改HTML ？

Answer 1

这是因为event bubbling 使用

$( document ).on( 'click touch', '.rate', function(e) {
   alert( $(this).data('rate') );
   e.stopPropagation();
});