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> {{likes}} Likes
</div>
</div>
</div>
以上是我的 meteor 元素中的示例 html 代码。我希望 div#card
元素通过单击它来激活 modal
。但我不希望 div.chip
元素在单击时切换 modal
。有没有办法可以从模态的 data-toggle
禁用子元素?
最佳答案
如果您可以使用 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
关于javascript - 如何从子元素中删除 data-target 和 data-toggle 或禁用元素触发事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36000095/