将参数传递给更高级别的事件处理程序

Posted 2021-04-03

假设我在另一个像这样的一个div中创建了一个div：

<div class='parent'>
    Parent
    <div class='chid'>
        Child
    </div>
</div>

以及javascript / jQuery脚本：

// Parent click event handler
$(document).on('click', '.parent', function(e){
    console.log("Parent clicked");
    console.log(myVar); //               <--- undefined obviously.
});

// Child click event handler
$(document).on('click', '.child', function(e){
    var myVar = "This is some string.";
    console.log("Child clicked");
});

现在，我要实现的是将myVar的值从子单击事件处理程序传递到父单击事件处理程序，以便可以在更高级别的事件处理程序中使用该变量？

答案

一种不必使myVar全局化的方法是：

$(document).on("click", "#parent", function(e) {
    console.log('clicked parent!', e.myVar); // if child was clicked, myVar will have value
});

$(document).on("click", "#child", function(e) {
    var myVar = 12;
    e.myVar = myVar; // attach de variable to the event
    console.log('clicked child!');
});

您将值附加到使DOM冒泡的事件上，因此仅在单击内部DIV时才收到该值。

我确信，取决于您要实现的目标，有更好的方法来执行此操作，但是，在没有更多信息的情况下，这应该可行。

希望对您有帮助。