Question

我使用jQuery UI Dialog控件在跨度悬停时显示弹出窗口。当我在跨度内移动鼠标时，弹出窗口不断闪烁。我知道jquery正在解雇mouseout＆amp;即使指针仍在范围内，鼠标快速移动。我如何解决它？这是代码 -

 <li><span id="score">Score: <span class="user-heading-value">@Model.Score</span></span></li>

  $('#dialog-score').dialog({
    autoOpen: false,
    modal: true,
    width: 200,
    height: 150     
});

$("#score").mouseenter(function () {
    $('#dialog-score').dialog('open');
});
$("#score").mouseleave(function () {
    $('#dialog-score').dialog('close');
});

我也试过了 -

$('#promptitude').hover(function () {
    $('#dialog-promptitude').dialog('open');
}, function () {
    $('#dialog-promptitude').dialog('close');
});

没有运气。任何帮助是极大的赞赏。谢谢！

Answer 1

尝试添加这段代码

$('#promptitude').mouseout(function(e){
  e.preventDefault();
});

这将阻止触发默认操作。

Answer 2

模态叠加层正在触发额外事件。您可能不需要对话框是模态的;在对话框启动时，用户可以通过两种方式与页面上的内容进行交互：

他们将鼠标移动到其他地方以点击某些内容。
他们使用键盘导航到其他东西。

（1）会触发mouseleave，所以没关系。

（2）可能存在问题，也可能不存在问题，具体取决于页面上的内容。如果它是一个问题，那么你可以将一个keydown处理程序绑定到<body>，它将关闭对话框并取消绑定，如下所示：

function close_dialog() {
    $('#dialog-score').dialog('close');
    $('body').off('keydown', close_dialog);
    return true;
}

$('#score').hover(function () {
    $('body').on('keydown', close_dialog);
    $('#dialog-score').dialog('open');
}, function () {
    $('#dialog-score').dialog('close');
    $('body').off('keydown', close_dialog);
});

演示：http://jsfiddle.net/ambiguous/Wrgu2/

防止jquery ui对话框在悬停时闪烁

2 个答案: