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;
});

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

点击任何一个孩子
点击父项

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

编辑：

我会更具体。我的页面上有一条消息列表，每个.message元素都包含消息内容，还包含一些功能，例如编辑，删除，设置为收藏夹等。

喜欢这个：

<div class="message" data-item="1">
  <a class="edit">E</a>
  <a class="delete">X</a>
  <a class="favorite">Fav</a>
  <a class="like">Like</a>
  <div class="content">
    Hello world !
  </div>
</div>
<div class="message" data-item="2">
  <a class="edit">E</a>
  <a class="delete">X</a>
  <a class="favorite">Fav</a>
  <a class="like">Like</a>
  <div class="content">
    Hello world !
  </div>
</div>

这些功能之一在单击时将触发不同的功能：edit（），delete（），like（）等。

所有这些人都会发出AJAX请求，然后将item变量发送到我的服务器，以便了解此点击必须影响哪些项目。

为了避免事件处理程序中的重复，我尝试通过绑定子元素的方式来获取data-item属性的值，并绑定一个事件来单击.message元素。

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就是应该这样做。

如何优先处理事件委派？

1 个答案: