Метеор: событие event.target.value не определено для события mouseenter / mouseleave - PullRequest
Новая
       44

Метеор: событие event.target.value не определено для события mouseenter / mouseleave

0 голосов
/ 07 июня 2018

В моем приложении Meteor есть таблица, представляющая неделю, и каждый элемент td имеет следующую структуру: 

<td id="day_hour" style="style" class="class" value="0,4 or 10">text</td>

Примером элемента td будет: 

<td id="lundi_{{id_heure}}" class="semaine" value={{valeurLundi}} style="background-color:hsla({{valeurLundi}}9, 75%, 55%, 1); border: white solid 5px; text-align:center; color:white;font-weight: bold; cursor:pointer;">
    {{#if lundiIsOk}} ✓ {{else}} {{#if lundiMaybe}} ~ {{else}} ✕ {{/if}} {{/if}}
</td>

Этот элемент представляет первый час понедельника, и это значение используется для определения цвета фона элемента.В этом конкретном случае в приложении значение устанавливается равным 0, а цвет фона для td устанавливается соответствующим образом.

Чтобы направлять пользователя и показывать ему, что взаимодействие с этими элементами td возможно, я хочунемного измените свойство background-color, когда он наведет на них курсор.Пытаясь заставить его работать, я понял, что, по-видимому, использование css выглядит так: 

.semaine:hover{
    background-color:hsla({{valeurLundi}}9,55%,55%,1);
}

не работает.Я предполагаю, что это из-за того, что ему нужны значения от помощника, и что даже если мой тег стиля находится внутри шаблона, css это не нравится и, следовательно, не будет работать.Попытка использовать обычный цвет, такой как светло-зеленый или черный, тоже не сработала, поэтому я решил использовать события для шаблона.

Играя с событиями mouseenter и mouseleave, я получил следующий код (примечание:Я использовал черный в событии mouseenter, чтобы протестировать с резким изменением цвета): 

'mouseenter .semaine': function(event){
    event.preventDefault();
    $(event.target).css({"background-color":"black"});
},
'mouseleave .semaine': function(event){
    event.preventDefault();
    if(parseInt(event.currentTarget.value) == 0){
        $(event.target).css({"background-color":"hsl(9, 75%, 55%, 1)"});
    }
    else if(parseInt(event.currentTarget.value) == 4){
        $(event.target).css({"background-color":"hsl(49, 75%, 55%, 1)"});
    }
    else if(parseInt(event.currentTarget.value) == 10){
        $(event.target).css({"background-color":"hsl(109, 75%, 55%, 1)"});
    }
}

Как вы можете видеть, background-color должен вернуться к тому, что был раньше, когда пользователь покинул тдэлемент.Моя проблема здесь: event.currentTarget.value возвращает неопределенное.

Поскольку я сначала подумал, что, возможно, это связано с тем, что event.currentTarget не был определен с самого начала, я поиграл с консольными журналами и обнаружил, что не только event.currentTarget возвращает правильный элемент td, но я также могувернуть id, стиль и класс, даже innerHTML элемента, но не его значение, которое является единственным атрибутом, который возвращается как неопределенный.

Излишне сегодня я действительно запутался, тем более чтоЯ также использую event.currentTarget.value для других событий, таких как щелчок, и он работает там.Я должен добавить, что я также пытался использовать jQuery $ (event.target) .val (), который также возвращает undefined.

Есть идеи, почему он так себя ведет?

...