0

我将 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 个事件实际执行任何操作。有没有办法：

  1. 告诉 jQuery 根本不要冒泡这些事件或
  2. 为所有具有类“customEventClass”的 DOM 对象添加一个默认的“停止传播”处理程序，以阻止它们冒泡他们没有特定处理程序的事件。

或者是否有任何其他好的做法可以仅在对这些事件感兴趣的元素上触发事件，而不是为对这些事件不感兴趣的元素触发大量事件。

4

2 回答 2

2

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

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。也可以为处理程序传递一个 false 值作为 function(){ return false; 的简写。}。所以，$("a.disabled").on("click", false); 将事件处理程序附加到所有具有“已禁用”类的链接，以防止在单击它们时跟踪它们并阻止事件冒泡。

见http://api.jquery.com/on/

于 2014-07-24T03:56:49.400 回答
1

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

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

function    eventWrapper(event){

    var logString = 'Event called: ' + event.type + ":" + event.namespace;

    if (jQuery.isFunction(this.log) == true) {
        this.log(logString);
    }
    else if (jQuery.isFunction(Logger.log) == true) {
        Logger.log(logString);
    }
    else{
        console.log(logString);
    }

    event.stopPropagation();
}

现在添加到 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，因此它不会冒泡到可能也在侦听该事件的其他元素。

于 2013-02-06T02:47:25.420 回答