对孩子

我有一个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>

这些都是标签，所以当我点击一个选项卡上，我有流星中的一个点击事件为新标签赋予一个类chat-tab-sel，并从旧标签（标准标签行为）中删除该类。

我的问题是，根据用户点击的位置，我的event.target并非全是父分区chat-tab，而是其中一个子分区span。我需要向父母div添加/删除类。

我认为，如果父母有display: block它可以工作，但在这种情况下，我需要它是display: flex，因为它有灵活的宽度childs。

所以：当用户点击一个孩子时，是否有可能确保父div被定位？

来源

2015-10-06 José Manuel Aguirre

'$（event.target）.closest（“.chat-tab”）'应该找到你要找的东西。 –

你可以试试'指针事件的CSS样式：无;'对孩子的跨度。也许只有父div会注册点击。（不知道这是否会工作） – wintvelt

显示切换类的事件处理程序代码。 – charlietfl

如果结合使用正常的流星事件处理程序@布赖恩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 
    } 
});

来源

2015-10-06 23:04:52

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

不确定流星的具体情况，但这是我如何使用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>

来源

2015-10-06 22:13:09

大厦微小巨人的事件冒泡的答案，这里是做到这一点的流星：

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标签的集合随时间变化。特别是，你不想访问每个标签并添加一个事件监听器。所以，充分利用冒泡，将单个事件处理程序绑定到BODY，并从该处理程序中查看event.target，以查看是否单击了A，如果是，则选择哪一个。不过要小心，因为event.target可能是SPAN！您不仅需要检查事件的目标是否为A标记，还需要通过简单的冒泡模拟来查找DOM树。

这是事件代表团。BODY元素是代表A标签处理事件的委托。从概念上讲，我们希望将事件处理程序视为在A标签上，所以我们尽可能地创建了这种幻觉。为此，事件委托（至少在jQuery和Meteor中）的最后一步是将event.currentTarget设置为A标签。 处理该事件，然后进一步代码看到一个的标签作为currentTarget当前和SPAN标记作为目标。 BODY元素并不重要，因此无法找到。

来源

2015-10-07 02:03:13 JeremyK

回答

相关问题