Question

我有一个函数，像这样简化：

var fooFunction = function($container, data) {
  $container.data('foobarData', data);

  $container.on('click', 'a', function(e) {
    var data = $(e.delegateTarget).data('foobarData');
    var $target = $(e.currentTarget);

    if (typeof data.validateFunction === 'function' && !data.validateFunction(e)) {
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    // Do stuff
    console.log(data.returnText);
  });
};

fooFunction('.same-container', {
  validateFunction: function(event) {
    return $(e.currentTarget).closest('.type-companies').length ? true : false;
  },
  returnText: 'Hello Company!',
});

fooFunction('.same-container', {
  validateFunction: function(event) {
    return $(e.currentTarget).closest('.type-humans').length ? true : false;
  },
  returnText: 'Hello Human!',
})

我在具有自定义.same-container的同一容器（validateFunction()）上使用事件委托来验证// Do stuff中的代码是否应该运行。

对于每次fooFunction()，我都有一些不同的逻辑将在// Do stuff上调用。问题在于，这两个事件委托存在冲突。似乎只有其中一个被调用并覆盖了另一个。

我如何拥有多个事件委托，并具有通过自定义validateFunction定义应调用哪一个的选项。我使用preventDefault() + stopPropagation()，因此在点击<a>时，只要validateFunction()返回true，什么都不会发生。

Answer 1

问题在于您每次都覆盖$(e.delegateTarget).data('foobarData')。

相反，您可以将选项添加到数组中，然后循环遍历直到找到匹配项。

var fooFunction = function($container, data) {
  var oldData = $container.data('foobarData', data);
  if (oldData) { // Already delegated, add the new data
    oldData.push(data);
    $container.data('foobarData', oldData);
  } else { // First time, create initial data and delegate handler
    $container.data('foobarData', [data]);
    $container.on('click', 'a', function(e) {
      var data = $(e.delegateTarget).data('foobarData');
      var $target = $(e.currentTarget);
      var index = data.find(data => typeof data.validateFunction === 'function' && !data.validateFunction(e));
      if (index > -1) {
        var foundData = data[index]

        e.preventDefault();
        e.stopPropagation();

        // Do stuff
        console.log(foundData.returnText);
      }
    });
  }
}

在同一容器上进行事件委派的问题

1 个答案: