Javascript mousup事件触发得很晚
我有一个非常好用的鼠标,但是如果我做一些拖动操作,mouseup事件开始非常慢。触发事件时大约需要1秒的时间。如果我转储mousemove事件的结尾,它会立即停止,但mouseup事件会在第二次之后开始。我为代码中的每个方法都添加了console.log(),但是在drag stop和mouseup之间没有调用。可能是什么原因 问题如何在浏览器中调试可能的并行进程?代码如下所示:Javascript mousup事件触发得很晚,javascript,jquery,google-chrome,mouseup,Javascript,Jquery,Google Chrome,Mouseup,我有一个非常好用的鼠标,但是如果我做一些拖动操作,mouseup事件开始非常慢。触发事件时大约需要1秒的时间。如果我转储mousemove事件的结尾,它会立即停止,但mouseup事件会在第二次之后开始。我为代码中的每个方法都添加了console.log(),但是在drag stop和mouseup之间没有调用。可能是什么原因 问题如何在浏览器中调试可能的并行进程?代码如下所示: .... state.doc .on( 'mousemove', d
....
state.doc
.on( 'mousemove', dragging )
.on( 'mouseup', endDrag );
}
/**
* @desc Start dragging
* @param e event obj.
*/
function dragging( e )
{
...
console.log('dragging end');
}
function endDrag( e )
{
var cEl = state.cEl,
hintNode = $( '#sortableListsHint', state.rootEl.el ),
hintStyle = hint[0].style,
targetEl = null, // hintNode/placeholderNode
isHintTarget = false, // if cEl will be placed to the hintNode
hintWrapperNode = $( '#sortableListsHintWrapper' );
if ( hintStyle.display == 'block' && hintNode.length && state.isAllowed )
{
targetEl = hintNode;
isHintTarget = true;
}
else
{
targetEl = state.placeholderNode;
isHintTarget = false;
}
offset = targetEl.offset();
cEl.el.animate( { left: offset.left - state.cEl.mL, top: offset.top - state.cEl.mT }, 250,
function() // complete callback
{
tidyCurrEl( cEl );
targetEl.after( cEl.el[0] );
targetEl[0].style.display = 'none';
hintStyle.display = 'none';
// This has to be document node, not hint as a part of documentFragment.
hintNode.remove();
hintWrapperNode
.removeAttr( 'id' )
.removeClass( setting.hintWrapperClass );
if ( hintWrapperNode.length )
{
hintWrapperNode.prev( 'div' ).append( opener.clone( true ) );
}
var placeholderNode = state.placeholderNode;
// Directly removed placeholder looks bad. It jumps up if the hint is below.
if ( isHintTarget )
{
placeholderNode.slideUp( 150, function()
{
var placeholderParent = placeholderNode.parent();
var placeholderParentLi = ( ! placeholderParent.is( state.rootEl.el ) ) ? placeholderParent.closest( 'li' ) : null;
placeholderNode.remove();
tidyEmptyLists();
setting.onChange( cEl.el );
setting.complete( cEl.el ); // Have to be here cause is necessary to remove placeholder before complete call.
state.isDragged = false;
if( setting.maxLevels !== false ) // Has to be after placeholder remove.
{
recountLevels( cEl.el );
if( placeholderParentLi ) recountLevels( placeholderParentLi );
}
});
}
else
{
state.placeholderNode.remove();
tidyEmptyLists();
setting.complete( cEl.el );
state.isDragged = false;
}
} );
scrollStop( state );
state.doc
.unbind( "mousemove", dragging )
.unbind( "mouseup", endDrag );
}
....
在这里,我为代码中的所有方法制作了一个转储示例。看看enddragggggggggggggggggggggggggggggggggggggggggggggggggggggg日志的延迟。我还在Opera浏览器中检查了这个问题,它没有问题
编辑:我认为问题在于animate调用中闭包中的局部变量。变量占位符节点、变量占位符父节点和变量占位符父节点。当我将其重写为全局状态时,对象问题消失了。我认为问题在于animate调用中闭包中的局部变量。变量占位符节点、变量占位符父节点和变量占位符父节点。当我将其重写为全局状态时,对象问题似乎不那么明显。但我不确定这是否是问题的根源。使用promise或async/await使其同步。 下面的链接包含有关异步的文档。
一个经典的用户点击会触发
mousedown
和mouseup
。
两者之间的时间通常在~50ms之间。
在这么短的时间内,浏览器可能会因为mousedown和事件冒泡和传播触发的进程而忙碌,特别是如果您在DOM树中绑定了太多的处理程序,比如文档或html,body”
。避免这样
而且,mouseup
可能永远不会被注册。
如果某些进程占用了太多时间,或者您的鼠标太快,则触发时,mouseup
可能不在目标元素上方,因此,永远不会触发该事件。我现在无法将所有代码重写为异步。我想知道如果所有的方法都完成了,但是mouseup在等待什么,会发生什么。我测试了这个实例,但无法重现错误:只要(从人的感知角度)我松开鼠标按钮,enddragggggg
消息就会出现在控制台中。是否有一个特定的测试用例来重现错误,或者您只是简单地将所述变量重写为全局状态对象来解决它?顺便说一句格拉茨!很不错的!嗯,看来这是我浏览器的问题。好。谢谢。我可以确认,Mac OST上的最新Chrome没有问题。这不是问题。很好的解释,但这对我来说不是解决办法。你能给我举一些“永远不要触发那个事件”的例子吗?我从没听说过。JS中的所有内容都在队列中…@chamo,例如,如果您删除mousedown上的元素?…这是有意义的。但这与此无关。