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

Meteor target element in child template and pass to global function

本文关键字：函数 全局 元素 目标 测量      更新时间：2023-09-26

我正试图创建一个全局函数，用于在'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和流星的新手。感谢你的耐心，如果我正在屠杀常见的术语或询问一些应该很容易自己解决的问题。

将事件附加到<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
}
相关文章：