将元素从一个侦听器传递到嵌套的侦听器

Question

[单击按钮时，将触发一个侦听器并打开一个模式，而我需要从单击的按钮中获取信息，以将其传递给在模式内部发生事件时触发的侦听器。

我的JavaScript：

$('li.tab').on('click', 'span.edit-tab', function() {
    var elem = $(this);
    var tabName = elem.parent().text();
    tabName = tabName.replace(/\s*$/g, '');
    $('#tab-name').val(tabName);
    $('#tab-name').on('keypress', function(elem) {
        var appendedSpan = '';
        appendedSpan += '  <span class="edit-tab glyphicon glyphicon-pencil" ';
        appendedSpan += 'data-toggle="modal" data-target="#edit-tab-modal"></span>';
        var newName = $(this).val() + appendedSpan;
        el.parent().html(newName);
    });
});

我正在尝试将触发模式的元素传递给输入的侦听器，但是无论我尝试传递什么，变量elem都是#tab-name的jQuery对象，而不是对于span.edit-tab。有什么想法吗？

Answer 1

我认为您唯一需要做的就是将eventData和$popupTriggerElem保存在keypress上下文之外：

$('.popupTrigger').on('click', function(popupEventData) {
    var $popupTriggerElem = $(this);
    $('#tab-name').on('keypress', function(tabEventData) {
        var $tabElem = $(this);
        //now you can use all 4 variables:
        console.log(popupEventData);
        console.log($popupTriggerElem);
        console.log(tabEventData);
        console.log($tabElem);
    });
});

通过这种方式，您可以访问：-触发点击事件的元素，-点击事件数据-触发按键事件的元素-按键事件数据

这是JS的精妙之处，它会保留您当前所在的任何功能/对象的每个父上下文，直到该功能/对象将从内存中删除。

编辑：

您可以在@Wynand注释中看到，此行为基于closures。 MDN docs中的更多内容。

Answer 2

对此的另一种解决方案可能是将所需的内容添加为事件目标的属性。

下面的代码片段说明了在发生“ mousedown”事件时仅如何欺骗“ mousemove”事件。为此，我们需要存储函数，以便以后可以将其删除。

如果要按照上面的答案来解决这个问题，则必须将结果存储为全局变量。相反，建议将值添加到html目标。在以下代码段中对此进行了说明，在该代码段中，我需要初始的“ mousedown”位置以及“ mouseup”位置。

canvas.addEventListener("mousedown", down => {
    down.target.posX = down.layerX;
    this.addEventListener("mousemove", mouseDownAndMouseMove);
});

canvas.addEventListener("click", e => {
    this.removeEventListener("mousemove", mouseDownAndMouseMove);
});

const mouseDownAndMouseMove = move => {
    console.log("initial click pos: ", move.target.posX);
    console.log("new move pos: ", move.layerX);
};