jQuery .click() - 需要确定鼠标按下的位置,而不是松开的位置
jQuery .click() - need to determine where mouse was pressed, not released
我有一个正在使用的简单弹出窗口插件,当您通过以下代码在弹出窗口外部单击时,它会自动关闭:
scroll-element
、contentSelector
和originalElement
是允许点击的元素,点击任何其他项目将关闭弹出窗口。这很好,但我希望它仅在弹出窗口外 按下和释放 鼠标的点击时关闭。
$(parentSelector).unbind('click').click(function(event) {
if( !$(event.target).closest(contentSelector).length && !$(event.target).closest('.scroll-element').length && !$(event.target).closest(originalElement).length ) {
if( $(contentSelector).is(":visible") ) {
destroyPopup();
}
}
});
问题是,如果您在弹出窗口内单击,但将鼠标拖到弹出窗口外,然后松开鼠标,弹出窗口会在本应保持打开状态时关闭。
这是一个示例 fiddle:https://jsfiddle.net/zb603hd5/
在fiddle中尝试点击白色区域,然后在白色区域松开;弹出窗口将保持打开状态。
现在尝试单击白色区域,但按住鼠标单击并将鼠标拖到弹出窗口外并松开,弹出窗口将关闭。我不希望这种情况发生。我希望 任何 源自弹出窗口的点击不关闭它。
这是一个问题的原因是,有时滚动条会附加到此弹出窗口,如果用户拖动滚动条并在弹出窗口外松开鼠标,当他们只想滚动时它会关闭。
是否可以通过传递给 .click()
函数的 event
参数确定是否允许我确定单击是在这些元素内部按下而不是默认情况下释放?
不要使用 .unbind('click').click();
改为使用
$(parentSelector).off('mousedown').on('mousedown',function(event){
//Rest remains the same
});
现在,点击并拖动到目标外时不会触发 mouseup。
这是更新后的 fiddle
https://jsfiddle.net/anubhabB/4x661z6j/
我有一个正在使用的简单弹出窗口插件,当您通过以下代码在弹出窗口外部单击时,它会自动关闭:
scroll-element
、contentSelector
和originalElement
是允许点击的元素,点击任何其他项目将关闭弹出窗口。这很好,但我希望它仅在弹出窗口外 按下和释放 鼠标的点击时关闭。
$(parentSelector).unbind('click').click(function(event) {
if( !$(event.target).closest(contentSelector).length && !$(event.target).closest('.scroll-element').length && !$(event.target).closest(originalElement).length ) {
if( $(contentSelector).is(":visible") ) {
destroyPopup();
}
}
});
问题是,如果您在弹出窗口内单击,但将鼠标拖到弹出窗口外,然后松开鼠标,弹出窗口会在本应保持打开状态时关闭。
这是一个示例 fiddle:https://jsfiddle.net/zb603hd5/
在fiddle中尝试点击白色区域,然后在白色区域松开;弹出窗口将保持打开状态。
现在尝试单击白色区域,但按住鼠标单击并将鼠标拖到弹出窗口外并松开,弹出窗口将关闭。我不希望这种情况发生。我希望 任何 源自弹出窗口的点击不关闭它。
这是一个问题的原因是,有时滚动条会附加到此弹出窗口,如果用户拖动滚动条并在弹出窗口外松开鼠标,当他们只想滚动时它会关闭。
是否可以通过传递给 .click()
函数的 event
参数确定是否允许我确定单击是在这些元素内部按下而不是默认情况下释放?
不要使用 .unbind('click').click();
改为使用
$(parentSelector).off('mousedown').on('mousedown',function(event){
//Rest remains the same
});
现在,点击并拖动到目标外时不会触发 mouseup。
这是更新后的 fiddle https://jsfiddle.net/anubhabB/4x661z6j/