元素上的两个单独的单击事件，其中第二个元素是第一个子元素

Question

我想区分点击事件。我有一个div结构，如下所示：

<div class="image-entry select-image">
    <img src="http:myimage.jpg" />
    <a class="btn btn-danger deleteimages" href="javascript:;">
        <i class="fa fa-times"></i>
    </a>
</div>

我必须执行两个不同的点击事件，一个用于课程 select-image ，另一个用于 对于课程 deleteimages

我有类 select-image 的点击事件正常工作，因为它是父div的一种 但是当我尝试触发类 deleteimages 的点击事件时，它会触发正确的点击事件，但同时也会触发 select-image 的点击事件，因为它是父母div。

如何针对这些事件触发点击事件，使它们彼此独立.. ??

另外，我不想使用内联函数调用。 例如

<a onclick="myfunction();"></a>

Jsfiddle

Answer 1

尝试event.stopPropagation()简单地阻止事件冒泡到祖先元素。

像这样：

$(".deleteimages").on('click',function(event){
    event.stopPropagation()
    //related code
})

API Doc

JS Fiddle

Answer 2

您也可以试试这个。

$(".deleteimages").click(function(event){
        alert('delete image click');
         return false;
});