javascript - jquery.trigger 2.2.1 时为 "e.stopImmediatePropagation is not a function"

Question

自从更新到 jQuery 2.2.1 以来，我在测试中收到以下错误。

TypeError: e.stopImmediatePropagation is not a function

调用它的函数:

items.on('dragstart.h5s', function(e) {
  e.stopImmediatePropagation();

  if (options.dragImage) {
    _attachGhost(e.originalEvent, {
      item: options.dragImage,
      x: 0,
      y: 0
    });
    console.log('WARNING: dragImage option is deprecated' +
    ' and will be removed in the future!');
  } else {
    // add transparent clone or other ghost to cursor
    _getGhost(e.originalEvent, $(this), options.dragImage);
  }
  // cache selsection & add attr for dragging
  dragging = $(this);
  dragging.addClass(options.draggingClass);
  dragging.attr('aria-grabbed', 'true');
  // grab values
  index = dragging.index();
  draggingHeight = dragging.height();
  startParent = $(this).parent();
  // trigger sortstar update
  dragging.parent().triggerHandler('sortstart', {
    item: dragging,
    placeholder: placeholder,
    startparent: startParent
  });
});

测试位置:

it('should correctly run dragstart event', function(){
  $ul.sortable({
    'items': 'li',
    'connectWith': '.test',
    placeholderClass: 'test-placeholder',
    draggingClass: 'test-dragging'
  });

  $li.trigger(jQuery.Event( 'dragstart', {
    originalEvent: {
      pageX: 100,
      pageY: 100,
      dataTransfer: {
        setData: function(val){
          this.data = val;
        }
      }
    }
  }));

  assert.equal($li.attr('aria-grabbed'),'true');
  assert.isTrue($li.hasClass('test-dragging'));

});

Answer 1

这里的问题是，因为您自己创建的 originalEvent 对象没有正常的事件相关方法。

当我们调用 jQuery 事件对象的 stopImmediatePropagation 方法时，它会尝试调用原始事件对象的相同方法，因为找不到该方法，因此会导致错误。

这里一个可能的解决方案是创建一个 custom event object

var event = document.createEvent('CustomEvent');
event.initEvent('dragstart', true, true);
event.pageX = 100;
event.pageY = 100;
event.dataTransfer = {
  setData: function(val) {
    this.data = val;
  }
};

$li.trigger(jQuery.Event(event));

演示:Fiddle