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

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> 

是我的流星項目的HTML代碼示例。我想通過點擊它來激活modal。但我不希望div.chip元素在單擊時切換modal。有沒有辦法可以禁用模態的data-toggle的子元素？

Answer 1

如果你可以使用javascript，你可以做stopPropagation停止點擊事件div.chip從冒泡到div#card。

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

對於流星模板元素，你做這樣的事情（與你的模板名稱替換yourTemplate），

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

見JSFiddle