如何为jQuery事件附加一些数据进行冒泡？

Question

要展示我想要实现的目标，最简单的方法是创建一个简单的示例：

​

$("#button-1").click(function (e) { e.data = { flag: true } });
$("#button-2").click(function (e) { e.data = { flag: false } });

$(window).click(function (e) { $("p").html(JSON.stringify(e.data)) });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='button-1'>button 1</button>
<button id='button-2'>button 2</button>

<p></p>

​

当我将任何东西附加到事件时，它会在冒泡到窗口后消失。有没有办法保存它？

Answer 1

我现在不能告诉你为什么它不能那样工作，我需要首先检查jQuery的源代码。

但是你可以把它连接到originalEvent上。但我可能会使用比data更具体的名称，以避免命名冲突。

​

$("#button-1").click(function (e) { e.originalEvent.data = { flag: true } });
$("#button-2").click(function (e) { e.originalEvent.data = { flag: false } });

$(window).click(function (e) { $("p").html(JSON.stringify(e.originalEvent.data)) });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='button-1'>button 1</button>
<button id='button-2'>button 2</button>

<p></p>

​

Answer 2

为什么不简单地将事件附加到父事件，并根据触发事件的target来处理数据呢？请看下面过于简化的代码片段(可能不需要一直到window，但这应该会给你一个想法)。

​

$(window).click(function (event) {
  if (event.target.id == 'button-1') {
    event.data = { flag: true };
  } else if (event.target.id == 'button-2') {
    event.data = { flag: false };
  }
  
  $('p').html(JSON.stringify(event.data));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button-1'>button 1</button>
<button id='button-2'>button 2</button>
<p></p>

​