如何优先处理事件委派？

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事件委托给父元素，否则事件将按以下顺序触发：点击任何一个孩子单击父级，为时已晚，因为我item首先需要变量我有一个功能，如果激活了它会替换父元素，因为它是动态插入到DOM中的，所以我还必须委派onClick事件，如下所示：$('.grandParent').on('click', '.parent', function () {  item = $(this).attr('item') || 0;});现在我的问题是事件再次以错误的顺序触发：点击任何一个孩子点击父项如何将父级的点击事件设置为最高优先级？

Answer 1

获取item您实际需要的位置，并摆脱上的处理程序parent：

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

  item = $(this).closest('.parent').attr('item');

  doSomething();

});

编辑：

然后，当您单击祖父母或外祖父母时获得物品：

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

  item = $(this).closest('.parent').attr('item');

});

编辑＃2：

根据OP的更新要求，请执行以下操作：

<div class="message" data-item="1">

  <a class="action edit" data-type="edit">E</a>

  <a class="action delete" data-type="delete">X</a>

  <a class="action favorite" data-type="favorite">Fav</a>

  <a class="like">Like</a>

  <div class="content">

    Hello world !

  </div>

</div>

<div class="message" data-item="2">

  <a class="action edit" data-type="edit">E</a>

  <a class="action delete" data-type="delete">X</a>

  <a class="action favorite" data-type="favorite">Fav</a>

  <a class="like">Like</a>

  <div class="content">

    Hello world !

  </div>

</div>

$(document).on('click','.message .action',function(e) {

   const item = $(this).closest('message').attr('item');

   switch($(this).data('type')) {

     case 'edit': doEdit(item); break;

     case 'delete': doDelete(item); break;

     case 'favorite': doFavorite(item); break;

   }

});

看到一个事件处理程序吗？

做自己的事是很常见的模式。在没有更强大的框架（例如React）的情况下，那么使用普通的jQuery就是应该做到的。