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

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>

above is sample html code from my meteor project. i want the div#card element to activate the modal by clicking on it. But i do not want the div.chip elements to toggle the modal when clicked. Is there a way i can disable child element from the data-toggle of the modal?

Answer 1

If you can use javascript, you can do stopPropagation for stopping click event on div.chip from bubbling to div#card .

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

For elements in a meteor template, you do something like this (replace yourTemplate with your template name),

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

See the JSFiddle