我有一个简单的弹出式插件,我正在使用它,当你点击弹出窗口外,它会通过以下代码自动关闭:
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();
}
}
});
问题是,如果您在弹出窗口内单击但将鼠标拖到弹出窗口之外,然后将其释放,则弹出窗口会在此情况下保持打开状态时关闭。
以下是一个示例小提琴:https://jsfiddle.net/zb603hd5/
在小提琴中,尝试单击白色区域并释放白色区域中的单击;弹出窗口将保持打开状态。
现在尝试点击白色区域但按住您的点击并将鼠标拖动到弹出窗口之外并释放它,弹出窗口将关闭。我不希望这种情况发生。我希望任何点击源自弹出窗口的点击它。
这是一个问题的原因是因为有时滚动条会附加到此弹出窗口,如果用户拖动滚动条并将鼠标放在弹出窗口之外,当它们只想滚动时它会关闭。
无论如何要从传递给event
函数的.click()
参数中确定是否允许我确定是否在这些元素中按下了点击而不是默认释放?
答案 0 :(得分:3)
不要使用.unbind('click')。click();
改为使用
$(parentSelector).off('mousedown').on('mousedown',function(event){
//Rest remains the same
});
现在,点击并在目标外拖动鼠标时不会触发鼠标。
继承人更新的小提琴 https://jsfiddle.net/anubhabB/4x661z6j/