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都是{{{i}的jQuery对象1}}，而不是#tab-name。有什么想法吗？

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);
};

将元素从一个侦听器传入嵌套侦听器

2 个答案: