如何從子元素中刪除數據目標和數據切換或禁止元素觸發事件？

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 div.chip 。

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

對於流星模板中的元素，您可以執行以下操作（將模板替換為您的模板名稱），

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

見JSFiddle