在传播期间修改事件数据答案

【问题标题】：modify event data during propagation在传播期间修改事件数据
【发布时间】：2011-08-19 06:49:04
【问题描述】：

在 jQuery 事件对象向上传播 DOM 时，有什么方法可以将数据附加到它？

澄清一下，如果您有三个嵌套的 div，每个都有一个单击事件侦听器，那么单击最里面的 div 会导致从最里面到最外面调用所有三个处理程序（事件传播 101）。我想做的是在每个处理程序中的事件对象中添加一些数据，这些数据可供下一层访问。

我该怎么做？

【问题讨论】：

【解决方案1】：

jQuery 传递的事件对象是原生事件对象的包装器。冒泡发生在 javascript/浏览器级别，因此本机事件对象似乎在所有事件处理程序之间共享。

$('div').click(function(e) {
    e.originalEvent.attribute =  (e.originalEvent.attribute || "") + 
        " " + $(this).prop("className");
    alert(e.originalEvent.attribute);
});

在 Chrome、Firefox、Safari、IE9 和 IE10 中测试。如果您在其他浏览器中进行测试，请对结果发表评论。

这是小提琴：http://jsfiddle.net/5AQqD/

【讨论】：

我刚刚在 IE10/9 上测试了它，它可以工作。这应该是正确的解决方案。
很糟糕，不支持 IE8。
这正是我所需要的，谢谢。这真的应该记录在 MDN 上。
如果事件是用javascript触发的，这将破坏js（originalEvent将是未定义的）。
@nils JavaScript 中的每个对象都是一个expando 对象，即你可以随意附加任何东西。这不是事件系统的特性，而是可以以这种特殊方式使用的 JavaScript。

【解决方案2】：

虽然您不能直接将数据附加到事件中，但您仍然可以通过 jQuery 的 data() 将数据附加到 targetElement：

$('div').click(function(e) {
    var info = $(e.target).data('info') || '';
    $(e.target).data('info', info + ' ' + $(this).attr('class'));
});

这是小提琴：http://jsfiddle.net/eKVmU/

【讨论】：

此解决方案在第一次触发事件时有效，但数据通过多个事件持续存在（在 jsfiddle 上，尝试多次单击，看看会发生什么）。真的很喜欢一种将数据与特定点击相关联的方式，因为它会冒泡，而不是特定元素......
@josh - 当数据碰到最外层的元素时，你为什么不直接删除它呢？ See here.
被否决，因为它没有回答 OP 提出的问题：“将数据附加到 jQuery 事件对象”。投票第二高的答案就是这样做的，应该排在首位，并且接受的答案...
同意这不是理想的解决方案 - 修改 originalEvent 应该是公认的答案

【解决方案3】：

也许我误解了这个问题，但我在寻找做同样事情的方法时遇到了这个 StackOverflow 页面。

我发现您可以在每个处理程序的末尾返回您想要传递的值/值，然后使用event.result 属性在后续处理程序中访问它们？

http://api.jquery.com/event.result/的简单演示

【讨论】：

我不相信这是正确的答案。在事件在 DOM 中冒泡后，它对我不起作用。