时间戳

首页 > 解决方案 > 单击卡片内的特定元素

javascript - 单击卡片内的特定元素

问题描述

我有一个示例卡片，里面有一个按钮。当我点击卡片时，会出现一个日志，表明卡片被点击，但是当我点击按钮时，会出现一条日志消息，表明我点击了卡片和按钮。

它应该只在单击按钮时显示按钮的日志消息。不是卡。

如何处理这个问题？

$('.cards-trigger').on('click', function(){
    console.log('cards-trigger')
});

$('.button-trigger').on('click', function(){
    console.log('button-trigger')
});

$('.cards').on('click', function(e){
    e.stopPropagation();
    $(this).siblings().trigger('click')
});

$('.add-button').on('click', function(e){
    e.stopPropagation();
    $(this).siblings().trigger('click')
});
.cards{
  padding:20px;
  background-color:grey;
}

.hidden{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, molestias.</p>
  <button class="add-button">Add</button>
  <button class="hidden button-trigger">BT</button>
</div>
<button class="hidden cards-trigger">CT</button>

标签： javascriptjquery

解决方案

通过单击按钮，您也可以单击卡片。首先为按钮引发事件，然后为卡片引发事件（依此类推，直到正文和 html）。如果您不希望事件传播，请添加 event.stopPropagation() ，例如：

$('#buttonAdd').on('click', function(e){
    e.stopPropagation();
    console.log('click the button')
})

请注意，我已将事件参数 (e) 添加到您的函数中。

推荐阅读