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

Question

假设我在另一个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 的值从子单击事件处理程序传递到父单击事件处理程序，以便我可以在更高级别的事件处理程序中使用该变量？

Answer 1

一种无需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 时，您才会收到该值。

我敢肯定，根据您想要实现的目标，有更好的方法来做到这一点，但是，如果没有更多信息，这应该可以工作。

希望这对你有帮助。