如何在div标记上使用onclick

Question

我在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>

Answer 1

您要查找的是event.stoppropagation()方法。这将防止事件冒泡到父容器。下面是一个使用HTML的示例。我使用了jQuery，因为其中涉及到引导程序。

null

$(".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>