如何优先处理事件委派？

Question

我的应用程式中有这个类似的程式码：

let item;

$('.parent').on('click', function () {

  item = $(this).attr('item') || 0; 

});

$('.parent').on('click', '.children', this, function () {

  doSomething();

});

<div class="parent" item="50">

  <div class="children">

  </div>

</div>

<div class="parent" item="51">

  <div class="children">

  </div>

</div>

<div class="parent" item="52">

  <div class="children">

  </div>

</div>

我有一个父元素，其中有几个孩子。单击父元素上的任何位置都会给我一个item信息，因此我将能够item在单击子元素时根据此变量加载函数。

我的问题是：我必须将子节点上的onClick事件委托给父元素，否则事件将按以下顺序触发：

1. 点击任何一个孩子

2. 单击父级，为时已晚，因为我item首先需要变量

我有一个功能，如果激活了它会替换父元素，因为它是动态插入到DOM中的，所以我还必须委派onClick事件，如下所示：

$('.grandParent').on('click', '.parent', function () {

  item = $(this).attr('item') || 0;

});

现在我的问题是事件再次以错误的顺序触发：

1. 点击任何一个孩子

2. 点击父项

如何将父级的点击事件设置为最高优先级？

Answer 1

获取item您实际需要的位置，并摆脱上的处理程序parent：$('.parent').on('click', '.children', function () {&nbsp; item = $(this).closest('.parent').attr('item');&nbsp; doSomething();});编辑：然后，当您单击祖父母或外祖父母时获得物品：$('.grandParent').on('click', '.children', function () {&nbsp; item = $(this).closest('.parent').attr('item');});编辑＃2：根据OP的更新要求，请执行以下操作：<div class="message" data-item="1">&nbsp; <a class="action edit" data-type="edit">E</a>&nbsp; <a class="action delete" data-type="delete">X</a>&nbsp; <a class="action favorite" data-type="favorite">Fav</a>&nbsp; <a class="like">Like</a>&nbsp; <div class="content">&nbsp; &nbsp; Hello world !&nbsp; </div></div><div class="message" data-item="2">&nbsp; <a class="action edit" data-type="edit">E</a>&nbsp; <a class="action delete" data-type="delete">X</a>&nbsp; <a class="action favorite" data-type="favorite">Fav</a>&nbsp; <a class="like">Like</a>&nbsp; <div class="content">&nbsp; &nbsp; Hello world !&nbsp; </div></div>$(document).on('click','.message .action',function(e) {&nbsp; &nbsp;const item = $(this).closest('message').attr('item');&nbsp; &nbsp;switch($(this).data('type')) {&nbsp; &nbsp; &nbsp;case 'edit': doEdit(item); break;&nbsp; &nbsp; &nbsp;case 'delete': doDelete(item); break;&nbsp; &nbsp; &nbsp;case 'favorite': doFavorite(item); break;&nbsp; &nbsp;}});看到一个事件处理程序吗？做自己的事是很常见的模式。在没有更强大的框架（例如React）的情况下，那么使用普通的jQuery就是应该做到的。