代码之家 › 专栏 › 技术社区 › abu abu

Parent&child.click()方法

html jquery

abu abu · 技术社区 · 6 年前

我有下面的HTML代码。

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

我有两个不同的jQuery .click() 方法。一个给 <li></li> 还有一个 <img/>

现在当我点击 <img/> 那么 <李></李> 。单击() 方法也在运行。

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

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

我怎样才能把它们分开,这样每个 。单击()

3 回复 | 直到 6 年前

Tân 6 年前

您可以尝试使用以下方法:

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

Sepehr Amirkiaee 6 年前

使用 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>

Ayaz Ali Shah 6 年前

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>

身份证件 所以你可以用它。

$('.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);
       }
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

9 月前

user28928120 · 如何在jquery中选择所有类?

9 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

9 月前