javascript - 如何从子元素中删除 data-target 和 data-toggle 或禁用元素触发事件？

Question

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 禁用子元素？

Answer 1

如果您可以使用 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