如何从子元素中删除数据目标和数据切换，或禁止元素触发事件

How to remove data-target and data-toggle from child elements or disable elements from triggering the event?

本文关键字：数据 元素 事件 禁止 目标 删除      更新时间：2023-09-26

HTML：

<div id="card_{{_id}}" class="card-panel" data-toggle="modal" data-target="#{{_id}}">
      <span class="white-text">{{text}}</span>
      <div class="card-action">
        {{#each tags}}
        <div class="chip">
          <tag class="tag">{{this}}</tag>
          <i id="removeTag" class="material-icons fa fa-ban"></i>
        </div>
        {{/each}}
        <div class="chip" id="likeButton">
          <i class="fa fa-thumbs-o-up"></i>&nbsp;{{likes}}&nbsp;&nbsp; Likes
        </div>
      </div>
    </div>

以上是我的 meteor 项目中的示例 HTML 代码。 我希望 div#card 元素通过单击它来激活modal。但我不希望div.chip元素在单击时切换modal。有没有办法从模态的data-toggle禁用子元素？

如果你可以使用javascript，你可以做stopPropagation来阻止div.chip上的点击事件冒泡到div#card。

$('.chip').on('click', function (ev) {
    ev.stopPropagation();
});

对于 meteor 模板中的元素，您可以执行以下操作（将 yourTemplate 替换为您的模板名称），

Template.yourTemplate.events({
    'click .div', function (ev, template) {
        ev.stopPropagation();
    }
});

请参阅 JSFiddle

相关文章：