我希望我能解释清楚。
我在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没有得到正确处理。
任何帮助非常感谢。
答案 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');
});
您还可以使用on
和off
方法:
$('#formWrap').on('mousedown',function() {
$svgContentRef.css({ cursor: 'url(images/cursor_dragging.gif),auto' });
$(this).off('mousedown');
});