jquery unbind事件似乎仍然出现在函数之外

时间:2012-05-16 13:45:01

标签: javascript jquery bind unbind

我希望我能解释清楚。

我在else if语句中有mousedown和mouseup函数(这允许用户在页面中拖动对象并与根据某些模式运行的指针和鼠标事件相关)。

代码:

}else if(typeof mode !== 'undefined' && mode === 'move'){

        toolId =        'toolMove';
        this.deselectAllElems($svgContentRef);  
        fdtObj.dragMode = true;

        $('#formWrap').draggable( "option", "disabled", false ).addClass('dragCursor');
        $svgContentRef.css({ cursor: 'url(images/cursor_drag.gif),auto' });

        $('#formWrap').bind('mousedown',function() {
            $svgContentRef.css({ cursor: 'url(images/cursor_dragging.gif),auto' });
        });
        $('#formWrap').unbind('mousedown',event);

        $('#formWrap').bind('mouseup',function() {
            $svgContentRef.css({ cursor: 'url(images/cursor_drag.gif),auto' });
        });
        $('#formWrap').unbind('mouseup',event);
    }else{

        $svgContentRef.css('cursor','default');

    }

问题似乎是当我点击另一种模式(当前模式之外)时,mousedown事件仍然被触发。我怀疑unbind没有得到正确处理。

任何帮助非常感谢。

3 个答案:

答案 0 :(得分:1)

变量事件来自哪里?它是处理程序传递的参数吗?

如果是这样,你必须传递给unbind()的是对你通过bind()或live()传递的同一个函数的引用

所以,你可以这样做:

$('#formWrap').bind('mousedown',function() {
        ....
        $(this).unbind('mousedown', this);
    });

其中$(this) refers to $('#formWrap')this refers to the function in scope

更新

而不是$('#formWrap').bind('mousedown',function() {...}); 做:

function handler(eventObject){
   .....
   $(this).unbind('mousedown', handler);
}

$('#formWrap').bind('mousedown', handler);

答案 1 :(得分:1)

这是完整的功能。当客户端点击其他模式时,一切都在重置光标选项方面有效。然而在拖曳模式下,拖曳光标上的mousedown第一次工作,鼠标也是如此,但是然后卡在鼠标选项上,即mousedown没有再次触发,这里是代码:

    this.switchDesignMode = function(mode){

    fdtObj.dragMode = false;

    $('#formWrap').draggable({ disabled: true });
    $('#formWrap').removeClass('dragCursor').css('cursor','');
    //$('#formWrap').unbind('mousedown');
    //$('#formWrap').unbind('mouseup');

    designMode =                mode;                                                                           

    var $sideRef =              this.getCurrentSideRef(),                                                       
        $svgContentRef =        this.getSvgContentRef($sideRef),                                                
        $panelTools =           $('#panelTools'),                                                               
        toolId =                'toolPointer';                                                                  

    if(typeof mode !== 'undefined' && mode === 'text'){

        toolId =                'toolText';
        this.deselectAllElems($svgContentRef);                                                                  
        $svgContentRef.css('cursor','text');                                                                    

    }else if(typeof mode !== 'undefined' && mode === 'move'){

        toolId =                'toolMove';
        this.deselectAllElems($svgContentRef);                                                                  
        fdtObj.dragMode = true;

        $('#formWrap').draggable( "option", "disabled", false ).addClass('dragCursor');
        $svgContentRef.css({ cursor: 'url(images/cursor_drag.gif),auto' });

        function handler1(eventObject){
            $svgContentRef.css({ cursor: 'url(images/cursor_dragging.gif),auto' });
            $(this).unbind('mousedown', handler1);
        }
        $('#formWrap').bind('mousedown', handler1);

        function handler2(eventObject) {
            $svgContentRef.css({ cursor: 'url(images/cursor_drag.gif),auto' });
            $(this).unbind('mouseup', handler2);
        }
        $('#formWrap').bind('mouseup', handler2);

    }else{

        $svgContentRef.css('cursor','default');                                                                 

    }

    $panelTools.find('a').removeClass('active');                                                                
    $panelTools.find('a#' + toolId).addClass('active');                                                         

};

(我也尝试在函数顶部设置一个解除绑定选项,但这不起作用。

希望这很清楚。 →

答案 2 :(得分:0)

试试这个:

   $('#formWrap').bind('mousedown',function() {
        $svgContentRef.css({ cursor: 'url(images/cursor_dragging.gif),auto' });
        $(this).unbind('mousedown');
    });

您还可以使用onoff方法:

   $('#formWrap').on('mousedown',function() {
        $svgContentRef.css({ cursor: 'url(images/cursor_dragging.gif),auto' });
        $(this).off('mousedown');
    });