父母发起的触发事件，从孩子冒泡

Question

如果我的<div class="timely"></div>包含一个表格，那么该表格就是<th class="prev"><i>previous</i></th> ... Chrome开发工具说<th>上有一个事件监听器，但Firefox开发工具指出它不在<th>上，而在于.timely，在查看此事件的处理程序中时Chrome也指出了这一点。

我想要做的是复制点击时发生的事情，发生在密钥上。它在jQuery中似乎并不那么简单：

$('.timely th').each(function(){
    $(this).on('keyup', function(){
        $(this).trigger('click');
    });
});

因为事件处理程序位于.timely上，并且它正在侦听从执行代码时起泡的位置。

我如何在.timely的关键字上复制点击事件，并在<th>冒泡？

Answer 1

首先，请注意，您的each循环没有理由（除非您还没有在其中执行其他操作）。请记住，jQuery是基于集合的，因此$("selector").on(...)会在集合中的所有元素上设置处理程序。

重新提问：接受事件参数并使用其target属性作为要触发的元素：

$('.timely th').on('keyup', function(e) {
    $(e.target).trigger('click');
});

或者，如果您想在.timely而不是th中的.timely处理它，只需更改选择器并使用委派表单（假设您只想要th个元素）：

$('.timely').on('keyup', 'th', function(e) {
    $(e.target).trigger('click');
});

当然，在keyup元素上获取th非常棘手;立即想到的唯一方法是在input中添加th元素，以便keyup气泡：

＆＃13;

＆＃13;

$('.timely th').on('keyup', function(e) {
    console.log("keyup");
    $(e.target).trigger('click');
});
$('.timely th').on('click', function(e) {
    console.log('click');
});

＆＃13;

<div class="timely">
  <table>
    <tbody>
      <tr>
        <th>
          <input type="text">
        </th>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

您还没有说为什么要在click上触发keyup，但如果只是为了运行click事件处理程序，我不建议这样做。相反，只需对keyup和click处理程序使用相同的函数。您可以通过.on（.on("click keyup", ...)）中的空格分隔来挂钩多个事件，或者使用命名函数并在您挂接click和keyup的位置引用它处理程序。

  

Chrome开发工具说<th>上有一个事件监听器，但Firefox开发工具指出它不在<th>上，而是父.timely

如果您不想看到附加到祖先的处理程序，请在“事件监听器”选项卡中取消选中 Ancestors 框：

但请注意，在您的示例代码中，处理程序肯定在th上，而不是祖先.timely元素。

Answer 2

这个jquery魔法可能无法快速运作

$('.timely th').each(function(){
    $(this).on('keyup', function(){
        $(this).trigger('click');
    });
});   

你可以抽象你想要在点击和关键字上使用的功能

function clickKeyupHandler (e) {
  // ...
}

// somewhere when you use it use same functions to handle click and keyup
// $('.timely').on('click', clickKeyupHandler);

$('.timely').on('keyup', 'th', clickKeyupHandler);