Events jQuery防止所有事件冒泡

我将jQuery与它的小部件工厂一起使用，并使用自定义事件来处理应用程序中的事件

这意味着我的所有事件绑定看起来非常像：

//...in the widget factory code

$(this.element).addClass('customEventClass');
$(this.element).bind('mysite.loadNextPage', $.proxy(this, 'loadNextPage');

事件是通过执行以下操作触发的：

$('.customEventClass').trigger('mysite.loadNextPage');

因为事件直接绑定到需要接收它们的元素，所以我不需要让这些自定义事件在DOM中冒泡出现。我知道我可以通过在事件处理程序代码中执行以下操作来检查偶数是否已冒泡：

if (event.target != event.currentTarget) {
    event.stopPropagation();
    event.preventDefault();
    return;
}

但目前，由于侦听自定义事件的大多数元素没有为“mysite.loadNextPage”注册处理程序，因此生成了51个事件，其中只有1个实际执行任何操作。有没有办法：

告诉jQuery根本不要冒泡这些事件，或者

向所有具有类“customEventClass”的DOM对象添加默认的“停止传播”处理程序，以阻止它们冒泡出一个没有特定处理程序的事件

---

或者有没有其他好的做法，只在那些事件中感兴趣的元素上触发事件，而不是在那些事件中不感兴趣的元素上触发很多事件。

看起来没有好的方法可以用jQuery来实现，但是编写一个新函数来实现这一点非常容易

首先，我编写了一个新函数来阻止事件冒泡（，并记录事件为什么不冒泡）

现在，一个新函数被添加到jQuery中

// A global GUID counter for objects
guidWrapper: 1,

proxyWrapper: function(wrappedFn, fn, context, wrapFn ) {

    var args, proxy, tmp;

    if ( typeof context === "string" ) {
        tmp = fn[ context ];
        context = fn;
        fn = tmp;
    }

    // Quick check to determine if target is callable, in the spec
    // this throws a TypeError, but we will just return undefined.
    if ( !jQuery.isFunction( fn ) ) {
        return undefined;
    }

    // Simulated bind
    args = core_slice.call( arguments, 3 );
    proxy = function() {
        wrappedFn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
        return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
    };

    // Set the guid of unique handler to the same of original handler, so it can be removed
    proxy.guid = fn.guid = fn.guid || jQuery.guid++;

    return proxy;
},

而不是像这样绑定函数：

$(this.element).bind('click', $.proxy(this.click, this));

而是像这样把它捆起来

$(this.element).bind('click', $.proxyWrapper(eventWrapper, this.click, this));

---

这意味着当事件被触发时，侦听该事件的第一个元素将调用事件上的event.stopPropagation，因此它不会冒泡到其他可能也侦听该事件的元素。

现在看来，用jQuery做这件事没有好办法，但是编写一个新函数来实现这一点非常容易

首先，我编写了一个新函数来阻止事件冒泡（，并记录事件为什么不冒泡）

现在，一个新函数被添加到jQuery中

// A global GUID counter for objects
guidWrapper: 1,

proxyWrapper: function(wrappedFn, fn, context, wrapFn ) {

    var args, proxy, tmp;

    if ( typeof context === "string" ) {
        tmp = fn[ context ];
        context = fn;
        fn = tmp;
    }

    // Quick check to determine if target is callable, in the spec
    // this throws a TypeError, but we will just return undefined.
    if ( !jQuery.isFunction( fn ) ) {
        return undefined;
    }

    // Simulated bind
    args = core_slice.call( arguments, 3 );
    proxy = function() {
        wrappedFn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
        return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
    };

    // Set the guid of unique handler to the same of original handler, so it can be removed
    proxy.guid = fn.guid = fn.guid || jQuery.guid++;

    return proxy;
},

而不是像这样绑定函数：

$(this.element).bind('click', $.proxy(this.click, this));

而是像这样把它捆起来

$(this.element).bind('click', $.proxyWrapper(eventWrapper, this.click, this));

---

这意味着当事件被触发时，侦听该事件的第一个元素将调用该事件的event.stopPropagation，因此它不会冒泡到其他也侦听该事件的元素。

您也可以从事件处理程序函数返回false以停止传播，这是我通常使用的：

从事件处理程序返回false将自动调用event.stopPropagation（）和event.preventDefault（）。也可以为处理程序传递一个false值，作为函数（）的缩写（{return false；}）。因此，$（“a.disabled”）。在（“click”，false）；将事件处理程序附加到类为“disabled”的所有链接，以防止在单击链接时跟踪它们，并阻止事件冒泡

---

请参见

您还可以从事件处理程序函数返回false以停止传播，这是我通常使用的方法：

从事件处理程序返回false将自动调用event.stopPropagation（）和event.preventDefault（）。也可以为处理程序传递一个false值，作为函数（）的缩写（{return false；}）。因此，$（“a.disabled”）。在（“click”，false）；将事件处理程序附加到类为“disabled”的所有链接，以防止在单击链接时跟踪它们，并阻止事件冒泡

看