Всегда выбрать родительский элемент при нажатии на ребенка

У меня есть 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>

Эти вкладки, так что, когда я нажимаю на одной вкладке, у меня есть событие click в Meteor, чтобы дать новой вкладке класс chat-tab-sel и удалить этот класс со старой вкладки (стандартное поведение вкладки).

Моя проблема в том, что в зависимости от того, где пользователь нажимает, мой event.target не всегда является родительским div chat-tab, но один из детей span. И мне нужно добавить/удалить классы родительскому div.

Я думаю, что если у родителя есть display: block, это может сработать, но в этом случае мне нужно, чтобы оно было display: flex, потому что имеет смысл иметь гибкую ширину для детей.

Итак: Возможно ли, чтобы родительский div был нацелен, когда пользователь нажимает на ребенка?

источник

2015-10-06 José Manuel Aguirre

'$ (event.target) .closest (" .chat-tab ")' должен получить то, что вы ищете. –

Вы можете попробовать стиль css 'pointer-events: none;' на дочерних участках. Возможно, тогда только родительский 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 привязан к элементу, к которому вы привязываете прослушиватель событий. Таким образом, мы можем прослушивать любые клики внутри этого элемента, а затем устанавливать текущую активную вкладку в неактивную, а вкладку clicked - активную.

Не знаю точно, что такое Метеор, но я бы это сделал, используя ванильный 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

Опираясь на ответ Tiny Гиганта о событиях кипящим, вот сделать это в метеора:

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 не очень важен, поэтому его нигде не найти.

источник

2015-10-07 02:03:13 JeremyK

Всегда выбрать родительский элемент при нажатии на ребенка

ответ

Смежные вопросы