javascript - 如何在 div 标签上使用 onclick
问题描述
我在 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>
解决方案
您正在寻找的是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>
推荐阅读
- python - python beautifulsoup:用字符串中的url替换链接
- python - 如何以python格式停止重复()
- node.js - 如何使用 elasticsearch npm 在 nodejs 中实现 elasticsearch 脚本
- python - 无法在 IDLE 上导入 pyperclip
- java - 在 Java 中直接 shuffle iterable
- shell - 以某种格式打印输出文件
- asp.net-core - 在 Asp.net Core 2.2 中设置最大请求 URL 长度
- javascript - 使音频进度条过渡更流畅
- php - Laravel,有没有办法将整个表与数组同步?
- r - 如何使用模型名称和变量列表来计算带有预测的表?