javascript - 除子元素之外的元素 div 上的单击事件

Question

我有一个列表，其中左侧包含文本，右侧包含图像。我想在单击列表元素时创建一个单击事件，它会触发代码，但是当单击同一元素上的图像时，它不会触发代码。

$('.list-group').on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault()
  $(this).ekkoLightbox()
})
$('.list-group').on('click', '.list-group-item', function(e) {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active')
    $(this).closest('.input').find('input').click()
  } else {
    $(this).addClass('active')
    $(this).closest('.input').find('input').click()
  }
})

.img-fluid{
  height: 150px;
  width: 150px;
}
.list-group-item{
  cursor:pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <div class="">
      Cras justo odio
    </div>
    <a
      href="https://p.bigstockphoto.com/rwyznvNQ76U2liDFDH6g_bigstock-Yachts-In-City-Bay-At-Hot-Summ-283784740.jpg"
      data-toggle="lightbox"
    >
      <img
        class="rounded float-right img-fluid"
        src="https://p.bigstockphoto.com/rwyznvNQ76U2liDFDH6g_bigstock-Yachts-In-City-Bay-At-Hot-Summ-283784740.jpg"
        alt="..."
    /></a>
  </li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

Answer 1

所以我在下面做了一个例子。

https://codepen.io/pglejzer/pen/wvaJQLe

$(".list-group").on("click", '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  if (!$(".list-group .list-group-item").hasClass("active")) {
    $(this).ekkoLightbox();
  }
});

$(".list-group").on("click", ".list-group-item", function(e) {
  if ($(e.target).hasClass("active")) {
    $(e.target).removeClass("active");
    $(this)
      .closest(".input")
      .find("input")
      .click();
  } else {
    $(e.target).addClass("active");
    $(this)
      .closest(".input")
      .find("input")
      .click();
  }
});

.img-fluid{
  height: 150px;
  width: 150px;
}
.list-group-item{
  cursor:pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center" >
    <div class="">
     Cras justo odio
      </div>
    <a  href="https://p.bigstockphoto.com/rwyznvNQ76U2liDFDH6g_bigstock-Yachts-In-City-Bay-At-Hot-Summ-283784740.jpg" data-toggle="lightbox">
		<img class="rounded float-right img-fluid" src="https://p.bigstockphoto.com/rwyznvNQ76U2liDFDH6g_bigstock-Yachts-In-City-Bay-At-Hot-Summ-283784740.jpg" alt="..."></a>

  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>