如何在 div 标签上使用 onclick答案

【问题标题】：How to use onclick on a div tag如何在 div 标签上使用 onclick
【发布时间】：2021-03-18 01:05:12
【问题描述】：

我在 div 标签内有一个段落和一个按钮。我想在 div 标签上使用 onlick="" 方法，但不在该 div 标签内的按钮上。我该怎么做。

<div class="alert alert-secondary alert-dismissible fade show" role="alert" data-bs-toggle="collapse" data-bs-target="#collapseExample{{data.id}}" aria-expanded="false" aria-controls="collapseExample">
  <p>
    <strong>{{ data.name }} / {{ data.messager_profile }}</strong> <span>{{ data.message_headline }}</span>
    <br>
    <span style="float: left;">8 days ago</span>
  </p>

  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <br>
  <div class="collapse" id="collapseExample{{data.id}}">
    <div class="card card-body">
      <strong>Detailed Message:-</strong> <span>{{ data.message }}</span>
    </div>
  </div>
</div>

【问题讨论】：

您的问题得到解答了吗？如果不是，请相应地发表评论。如果是，请选择一个答案。

标签： javascript html bootstrap-4

【解决方案1】：

您正在寻找的是event.stopPropagation() 方法。这将防止事件冒泡到父容器。这是一个使用您的 HTML 的示例。由于涉及到 Bootstrap，所以我使用了 jQuery。

$(".alert.alert-secondary").click(function() {
  console.log("Parent container");
})

$(".btn-close").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log("Button");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="alert alert-secondary alert-dismissible fade show" role="alert" data-bs-toggle="collapse" data-bs-target="#collapseExample{{data.id}}" aria-expanded="false" aria-controls="collapseExample">

  <p>
    <strong>{{ data.name }} / {{ data.messager_profile }}</strong> <span>{{ data.message_headline }}</span>
    <br>
    <span style="float: left;">8 days ago</span>
  </p>


  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">button</button>
  <br>
  <div class="collapse" id="collapseExample{{data.id}}">
    <div class="card card-body">
      <strong>Detailed Message:-</strong> <span>{{ data.message }}</span>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这里不需要jQuery，也不需要改变按钮点击的行为。相反，在您的点击处理程序中，检查被点击的元素：

document
  .querySelector('.alert.alert-secondary') // select the div
  .addEventListener('click', function(e) { // register a click listener
    const clickedElement = e.target; // the event object holds information about the clicked element
    if (clickedElement.tagName !== 'BUTTON') { // make sure you don't react to button clicks bubbling to the div
      console.log('div clicked');
    }
  });

<div class="alert alert-secondary alert-dismissible fade show" role="alert" data-bs-toggle="collapse" data-bs-target="#collapseExample{{data.id}}" aria-expanded="false" aria-controls="collapseExample">
  <p>
    <strong>{{ data.name }} / {{ data.messager_profile }}</strong> <span>{{ data.message_headline }}</span>
    <br>
    <span style="float: left;">8 days ago</span>
  </p>

  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">x</button>
  <br>
  <div class="collapse" id="collapseExample{{data.id}}">
    <div class="card card-body">
      <strong>Detailed Message:-</strong> <span>{{ data.message }}</span>
    </div>
  </div>
</div>

【讨论】：