Question

在我的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)"});
    }
}

正如您所看到的，背景颜色应该恢复用户离开td元素时的状态。我的问题在这里：event.currentTarget.value返回undefined。

因为我首先想到的可能是因为event.currentTarget从一开始就没有被定义，所以我使用了控制台日志并发现不仅event.currentTarget确实返回了正确的td元素，而且我还可以返回id ，样式和类，甚至是元素的innerHTML，但不是它的值，这是唯一以undefined形式返回的属性。

当天我真的很困惑，特别是因为我还在其他事件（例如点击）上使用了event.currentTarget.value，并且它在那里工作。我必须补充说我还尝试使用jQuery $（event.target）.val（），它也返回undefined。

知道为什么会这样吗？

Meteor：在mouseenter / mouseleave事件中未定义event.target.value

0 个答案: