Передать аргумент обработчику событий более высокого уровня

Question

Давайте предположим, что я создал один 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 из дочернего обработчика события click в родительский обработчик события click, чтобы я мог использовать эту переменную в обработчике события более высокого уровня?

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

Я уверен, что в зависимости от того, чего вы хотите достичь, есть лучшие способы сделать это, но без дополнительной информации это должно сработать.

Надеюсь, это поможет вы.