Jq父、子元素都绑定事件时点击子元素不触发父元素点击事件

最近写代码遇到一个细节的小问题，点击子元素标签不仅触发了子元素点击事件，还会执行父元素点击事件，解决方式如下：

<li>
	<a>
		子元素
	</a>
	<i tabclose="11" >
		子元素
	</i>
</li>

为li标签和i标签都添加点击事件后，当我点击i标签区域，li标签的点击事件也会触发，后来经过查询文档发现，避免这个问题只需要为i标签的点击事件上加上jquery防止事件冒泡即可，如下：

$("i").on("click", "[tabclose]", function(e) {
        e.stopPropagation();
        //防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
	var id = $(this).attr("tabclose");
	
});

//或者
$("i").click(function(e){
        e.stopPropagation();
        //防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
	var id = $(this).attr("tabclose");
})