触发父级事件，从子级冒泡

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 keyup上的click事件以及它从<th>起泡的上下文？

Answer 1

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

您的问题：接受事件参数并将其target属性用作触发其的元素：

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

或者，如果您想在.timely而不是.timely的th进行.timely ，只需更改选择器并使用委派形式（假设您只希望在th元素上使用它）：

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

当然，要在th一个元素上输入keyup是很棘手的； 立即想到的唯一方法是在th放置一个input元素，这样keyup冒泡：

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

 <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> 

---

您没有说为什么要触发keyup click ，但是如果只是为了运行click事件处理程序，则不建议这样做。 取而代之的是，只对keyup和click处理程序使用相同的功能。 您可以只用空间划定在他们钩多个事件.on （ .on("click keyup", ...)或使用命名函数和引用它，你钩住你的click和keyup处理程序。

---

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

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

但是请注意，在示例代码中，处理程序绝对位于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);