Question

所以我有一个由mousedown, mouseup and mousemove事件组成的自定义拖动方法，就像这样。我的方法是 - move()

$(document).on('mousedown', function() {drag = true });
$(document).on('mouseup', function() {drag = false });
$(document).on('mousemove', function() { if (drag) move() });

这一切都很完美，但想象一下这个move()声明：

function move() {
  confirm('Do you blablabla...?');
}

现在序列是这样的：

我点击了文件
我移动鼠标
我得到一个确认模式框
我点击确定/取消
我移动鼠标
我得到一个确认模式框

我得到了确认模式框，尽管我释放了鼠标按钮。事实证明，在显示模式框时没有报告任何事件。

我的问题 - 如何解决这个问题？

我虽然只有一个可能的解决方案 - 使用自定义模式框（如jQuery UI Modal）覆盖window.alert / window.confirm但在这种情况下我想保留默认值并且应用程序已经足够成熟以便用户使用默认查看模态。

我如何修复它？

我这样做了：

  var _alert = window.alert;
  var _confirm = window.confirm;

  window.alert = function() {
    drag = false;
    return _alert.apply(this, arguments);
  }

  window.confirm = function() {
    drag = false;
    return _confirm.apply(this, arguments);
  }

在不引入新bug的情况下，它对我很有用。我会很感激任何对这个解决方案的看法。

Answer 1

模态将导致事件暂停，因为您不再单击页面/正文。

最好的解决方案是你自己的带样式的滚动对话框。

尝试http://jqueryui.com/dialog/

Answer 2

我用相当简单的代码解决了我的问题。尽管担心修改原始方法，但我还是试着保留原始方法。

一旦显示模态或警报，代码只会将拖动标志设置为false。

  var _alert = window.alert;
  var _confirm = window.confirm;

  window.alert = function() {
    drag = false;
    return _alert.apply(this, arguments);
  }

  window.confirm = function() {
    drag = false;
    return _confirm.apply(this, arguments);
  }

window.alert / window.confirm期间的鼠标事件

2 个答案: