传播时的 JavaScript 事件通信？

Question

我有 2 个 DIV 的这个简单标记。一个在另一个里面

绿色嵌套在红色 div 下。

两者都有不同的 onclick 处理程序，当我点击绿色时，事件冒泡到红色 div 并触发它的 onclick。(它应该是这样)。

但是，当我单击绿色 div 时，我使用了 event Data overload :

$(".divGreen").on('click',{ name: "Karl"}, function (e)
                        {
                              alert('inner');
                        });

我可以读取值:

  $(".divGreen").on('click',{ name: "Karl"}, function (e)
                            {
                               //e.data.name....
                            });

但我不希望绿色处理函数读取数据，但RED DIV处理函数读取数据

我可以通过在绿色 div 上停止传播并使用 “trigger 红色点击” 来完成事件数据。 - 但我不想。

所以我的问题:

有没有什么办法(请不要使用全局变量)当事件冒泡时，数据也会冒泡？

JSBIN

Answer 1

由于事件的目标在事件冒泡时保持不变，您可以像这样将数据附加到 e.target.data:

$(".divGreen").on('click',{ name: "Karl"}, function (e) {
    e.target.data = e.data;
});

然后您可以在父事件中获取它:

$(".divRed").on('click', function (e) {
    alert(e.target.data.name); // alerts "Karl"
});