Question

我有一个div（一个标签），里面有3个跨度，如下所示：

<div class="chat-tabs">
    <div class="chat-tabs-cont">
        <div id="chat-tab-1" class="chat-tab chat-tab-sel">
            <span class="chat-tab-n">1</span>
            <span class="chat-tab-t">Tab text 1</span>
            <span class="chat-tab-c">11:00</span>
        </div>
        <div id="chat-tab-2" class="chat-tab">
            <span class="chat-tab-n">2</span>
            <span class="chat-tab-t">Tab text 2</span>
            <span class="chat-tab-c">11:30</span>
        </div>
    </div>
</div>

这些是标签，所以当我点击一个标签时，我在Meteor中有一个点击事件，为新标签提供一个chat-tab-sel类，并从旧标签中删除此类（标准标签行为）。

我的问题在于，根据用户点击的位置，我的event.target并非总是父div chat-tab，而是孩子span之一。我需要向父div添加/删除类。

我认为如果父母有display: block它可能有效，但在这种情况下我需要它display: flex，因为在孩子身上有灵活的宽度是有道理的。

那么：当用户点击一个孩子时，是否可以确保父div是目标？

Answer 1

如果将普通的Meteor事件处理程序与@Brian Shamblen的提示结合使用，它应该可以正常工作。

Template.myTemplate.events({
  'click .chatTab': function(ev){
    $(".chat-tab").removeClass("chat-tab-sel"); // remove from all
    $(ev.target).closest(".chat-tab").addClass("chat-tab-sel"); // set the one you're on
  }
});

Answer 2

活动泡沫。这意味着您可以在父级上侦听事件。在事件中，侦听器this绑定到绑定事件侦听器的元素。因此，我们可以侦听该元素中的任何点击，然后将当前活动标签设置为非活动状态，并将单击的标签设置为活动状态。

特别不确定Meteor，但这是我使用vanilla JavaScript实现这一目标的方法。

var tabs = document.querySelectorAll('.chat-tab');

for(var i in Object.keys(tabs)) tabs[i].onclick = function() {
    document.querySelector('.chat-tab.chat-tab-sel').className = 'chat-tab';
    this.className += ' chat-tab-sel'
}

.chat-tab-sel {
  border: 1px solid #012450;
}

<div class="chat-tabs">
    <div class="chat-tabs-cont">
        <div id="chat-tab-1" class="chat-tab chat-tab-sel">
            <span class="chat-tab-n">1</span>
            <span class="chat-tab-t">Tab text 1</span>
            <span class="chat-tab-c">11:00</span>
        </div>
        <div id="chat-tab-2" class="chat-tab">
            <span class="chat-tab-n">2</span>
            <span class="chat-tab-t">Tab text 2</span>
            <span class="chat-tab-c">11:30</span>
        </div>
    </div>
</div>

Answer 3

在Tiny Giant的基础上回答起泡的事件，这是在流星中做到的：

Template.theTemplate.events({
  'click .chat-tab': function(ev) {
    $('.chat-tab').removeClass('chat-tab-sel'); 
    $(ev.currentTarget).addClass('chat-tab-sel');
  }
});

这是一篇有趣的info.meteor.com博文，其中详细介绍了这一点：

Browser events: bubbling, capturing, and delegation

假设您有这种HTML结构：

<body>
  <p>
    <a><span>Hello</span></a>
  </p>
</body>

事件委托不是一个浏览器功能，而是一种内置于jQuery等库中的流行技术。很多博客都在谈论它或者将其与冒泡等同起来，但我希望以下描述是清楚的。

假设您要响应页面上任何A标记的点击，即使A标记集随时间变化也是如此。特别是，您不想访问每个A标记并添加事件监听器。因此，利用冒泡，您将单个事件处理程序绑定到BODY，并从此处理程序中查看event.target以查看是否单击了A，如果是，则查看哪一个。但要小心，因为event.target可能是SPAN！您不仅需要检查事件的目标是否是A标记，还需要在简单的冒泡模拟中走向DOM树。

这是事件委托。 BODY元素是代表A标签处理事件的委托。从概念上讲，我们希望将事件处理程序视为A标记，因此我们尽可能地创建这种错觉。为此，事件委托的最后一步（至少在jQuery和Meteor中）是将event.currentTarget设置为A标记。 处理该事件的其他代码会将A标记视为currentTarget，将SPAN标记视为目标。 BODY元素并不重要，因此无处可寻。

单击子项时始终选择父元素

3 个答案: