子模板中的流星目标元素并传递给全局函数

Question

我正在尝试创建一个全局函数，用于在单击“tr”元素外部时删除“选定”类。但是，我使用的事件没有注册正确的目标元素，因为该元素位于子模板中。这是我的模板代码。

<template name="index">
        {{> header}}
        {{> navigation }}
        <section id="section-main" class="container">
            {{> yield}}
        </section>
        {{> footer}}
    </section>
</template>

我将点击事件附加到“索引”模板。这是事件代码，调用函数“deselectRow”...

Template.index.events({
    // Event: Click anywhere to deselect row
    "click": function (e) {
        // console message
        // console.log("you clicked a DOM element");
        deselectRow(e);

    }
});

接着是函数本身，在该函数本身中，根据我希望成为 'tr' 的当前目标检查事件...

// DESELECT Row
    deselectRow = function (e) {

        // Event: Click anywhere outside a table row element and remove selected class from tr
        if (e.currentTarget != $('tr')) {
            $('tr').removeClass('selected');
            console.log('you clicked outside a table row element')
        }
        else {
            console.log('you clicked a table row element')
        }
    };

我的理解是，单击该行时，“索引”模板的事件处理程序没有注册我已单击该行（即：将其用作 currentTarget）。我相信这是因为该行位于正在“生成”的子模板中。

如何让索引模板将 'tr' 识别为 currentTarget？

附：我是 javascript 和流星的新手。如果我在扼杀常用术语或询问一些应该很容易自己解决的问题，感谢您的耐心等待。

Answer 1

将事件附加到<tr> 并点击：

'click tr': function(ev){
  var currentRow = ev.target;
  $('tr').removeClass('selected'); // deselect any previously selected rows
  currentRow.addClass('selected'); // select the one just clicked on
}