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();
});

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

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

请参阅JSFiddle

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

1 个答案: