Question

我有以下HTML代码。

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

我有2种不同的jQuery .click()方法。一个用于<li></li>，另一个用于<img/>。

现在，当我单击<img/>时，然后<li></li> .click()方法也将运行。

这是jQuery代码。

$('.list-group li').click(function () {
    //some code here    
});

 $('.delete').click(function () {
    //some code here 
});

如何使它们分开，以便每个.click()方法都单独运行？

Answer 1

您可以尝试使用这种方式：

var li_onclick = function (li) {
  console.log(li);
};

var img_onclick = function (img) {
  console.log(img);
};

$(document).on('click', function (e) {
  if (e.target.tagName === 'LI') {
    li_onclick(e.target);  
  } else {
    img_onclick(e.target);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

使用e.target检查单击了哪个元素。然后，检查tagName以对li标签和img标签进行分类。

Answer 2

使用event.stopPropagation()方法。

此方法防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。 jQuery API Documentation

$('li.list-group-item').on('click',function(){
  console.log('LI Clicked')
})

$('img.delete').on('click',function(event){
  event.stopPropagation()
  console.log('IMG Clicked')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

Answer 3

假设您在同一个类id上都拥有不同的.click属性

<li class="list-group-item font-weight-bold click" id="this_is_li">
    Mouse
    <img src="images/delete.png" class="delete click" id="this_is_img"/>
</li>

当您单击脚本下方的元素时，它将使您知道该元素id，因此您可以使用它。

$('.click').on('click', function(){
       var ID = $(this).attr('id'); 
       if(ID === 'this_is_li'){
           alert('you clicked on li #' +ID);
       }
       if(ID === 'this_is_img'){
           alert('you clicked on img #' +ID);
       }
});

父级和子级.click（）方法

3 个答案: