时间戳

首页 > 解决方案 > 关于使整个 div 可点击（角度）的 HTML 问题

html - 关于使整个 div 可点击（角度）的 HTML 问题

问题描述

示例 HTML 代码：

<div class="first-div" (click)="onClickCustomCard(d)">
  Some text..
  Images...
  <input type="checkbox">
</div>

所以我的问题是，当我尝试单击“输入类型复选框”时，它也会触发 onCLickCustomCard()。有没有办法在我单击输入时不自动触发 onC;ickCustomCard() ？谢谢各位帮忙...

标签： htmlangular

解决方案

您可以通过在单击输入元素时停止事件传播来做到这一点。

事件可以在 dom 树中冒泡，这意味着每个父元素也接收事件，在您的情况下是单击事件。

Event 接口的stopPropagation()方法防止在捕获和冒泡阶段进一步传播当前事件。

编辑，一些与您的问题没有直接关系的注释：将点击事件添加到 div 不是一个好习惯，因为这不会使它们通过键盘聚焦。因此，您只能用鼠标单击它们，但不能用 Tab 键单击它们，然后用空格或返回键单击它们。如果您使用按钮或链接，则此行为已为您实现。

function onClickCustomCard() {
console.log('clicked Card')
}

document.querySelector('.first-div input').addEventListener('click', function(e) {
 e.stopPropagation();
});
<div class="first-div" onclick="onClickCustomCard()">
  Some text..
  Images...
  <input type="checkbox">
</div>

推荐阅读