jQuery(和其他)事件处理程序包装器难题

时间:2014-01-09 18:08:16

标签: javascript javascript-events raphael jquery

在底部更新

ORIGINAL

Here is a jsfiddle显示了我的问题。我稍后会描述这个问题。这是代码,因为SO要我粘贴它:

HTML

<input class="on" value="on" type="button" />
<input class="off" value="off" type="button" />
<div class="subject"></div>

JS

(function($) {
    var wrap = function(func) {
        return function(e) {
            console.log('click some special logic');
            func.apply(this, [].slice.call(arguments,0));
        };
    };

    function generic_click_func(e) {
        console.log('generic click called');
    };

    function generic_mouseover_func(e) {
        console.log('generic mouseover called');
    };

    function generic_mouseout_func(e) {
        console.log('generic mouseout called');
    };

    $('.on').on('click', function() {
        $('.subject').on('click', wrap(generic_click_func))
            .on('mouseover', wrap(generic_mouseover_func))
            .on('mouseout', wrap(generic_mouseout_func));
    });
    $('.off').on('click', function() {
        $('.subject').off('click', wrap(generic_click_func))
            .off('mouseover', wrap(generic_mouseover_func))
            .off('mouseout', wrap(generic_mouseout_func));
    });
})(jQuery);

CSS

.subject { height:20px; width:20px; background-color:#ff0000; }

问题

我的代码的问题是,当调用wrap()时,即使使用相同的func参数,结果函数也是函数的新版本。因此,当与具有相同func参数的先前结果函数相比时,它不相等。 jsfiddle演示了这一点。

在小提琴中,我们在两个地方调用wrap(somefunction),一次用于.on(),一次用于.off(),但与每个调用相比,每个调用的结果函数被认为是不同的函数其他。这在技术上是正确的,因为wrap()函数每次调用时都会返回新函数。因此,当使用此.on()参数调用wrap(somefunction)函数,然后使用相同的参数调用.off()(我知道的不同)时,.off()函数找不到列表中的函数(因为比较方法),因此不会删除处理程序。

据我所知,如果我控制了函数比较代码,我可以这样做:

if (''+func1 == ''+func2) { remove_handler(ele, func2); };

但是,我不是,因为这是jQuery的一部分。具体来说,它是inArray()函数的一部分,因为这是jQuery用来删除事件处理程序的东西,这也是正确的,因为inArray()具有多用途,其中并不总是需要字符串比较。

我需要什么

我需要针对此问题的解决方法,以便我可以使用像wrap这样的包装函数返回func param的包装器,稍后可以将其与创建的另一个包装函数进行比较使用完全相同的代码,并根据jQuery相等,以便.off()函数可以实际删除它。 jsfiddle是正在发生的事情的一个确切示例。我需要的是.off()函数实际工作,同时保持包装函数序列。

SIDE注意:在示例代码中,我添加了mouseovermouseout事件,以简单地演示此包装函数是一个多用途,完全可重用的代码片段,并不是{{1事件。就此而言,它不是单个元素所独有的。它需要适用于页面上的多个元素,以及每个元素的多个事件。

更新

在Andrew发表深刻见解之后,我通过简单地利用jQuery命名空间能力来实现这一点。这解决了jQuery事件的问题;但是,我对RaphaelJS click.click()函数有完全相同的问题。任何人都可以提供帮助吗?这是使用RaphaelJS演示相同问题的new jsfiddle

提前致谢

0 个答案:

没有答案