Dialog的關閉事件觸發焦點事件並導致無限循環

我將我的應用程序移至最新的jQueryUI版本，現在行爲已經改變。即當打開對話框時，在具有焦點的元素上調用模糊事件。當對話框關閉時，該元素的焦點事件再次被調用。以前的jQuery版本沒有調用這些事件。Dialog的關閉事件觸發焦點事件並導致無限循環

問題是我打開焦點事件中的對話框，關閉它，因此再次調用焦點併發生無限循環。

我該如何防止這個無限循環？

編輯：

我無法得到它的權利在一個簡單的jsfiddle最好的是這個

http://jsfiddle.net/8sfjV/11/

<div id="dialog" title="Select Value"> 
    <select id="select" name="select"> 
     <option value="1">Test</option> 
    </select> 
</div> 
<input type="text" name="test" id="test" value="" /> 

$(document).ready(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     height: 120, 
     width: 185, 
     position: [285, 200], 
     modal: true, 
     buttons: { 
      "Ok": function() { 
       $(this).dialog("close") 
      } 
     } 
    }); 

    $("#test").focus(function (event) { 
     $("#dialog").dialog("open"); 
    }); 
});

這裏沒有死循環，但你可以在關閉後見因爲一切都「模糊不清」，頁面（結果）的對話框被打破。

而且舊的行爲更像是這一個：

http://jsfiddle.net/SrSXU/3/

這裏的背景仍然是「模糊了」，但你可以將精力集中到輸入這是不可能的新版本。

來源

2014-07-16 beginner_

嘗試使用點擊而不是焦點。這應該工作：

http://jsfiddle.net/bDnK9/

$("#test").click(function (event) { 
    $("#dialog").dialog("open"); 
});

來源

2014-07-16 12:48:15 Tarek

這對鍵盤導航或屏幕閱讀器用戶無效。 – isherwood

您是否考慮過設置關閉狀態然後檢查它？

如果該對話框關閉，您可以設置類似$("#test").data('coming-from-dialog', true)，那麼你的重點處理程序可以是這樣的：

$("#test").focus(function (event) { 
    var test = $(this); 
    if(!!test.data('coming-from-dialog')) { 
     // clear state for next focus 
     $this.data('coming-from-dialog', false); 
     return; 
    } 

    $("#dialog").dialog("open"); 
});

當然你也可以在對話框近距離對焦別的東西上接近，或者點擊文件正文左右清除焦點。

來源

2014-07-16 12:43:18 Meligy

我想出了在模糊事件中設置一個控制變量：http：// jsfiddle。net/ZuZdV/4/ –

我不能說這是否是早期版本的jQueryUI的真實，但是...

在關閉對話框時，焦點將自動返回到元素是有打開的對話框時關注的焦點。

http://api.jqueryui.com/dialog/

看來你應該使用其他事件來打開對話框。

來源

2014-07-16 12:45:08 isherwood

var idOfTheElementLastModalWasOpenedFor = null; 
$(":focusable:not(#test)").focus(function() { 
    idOfTheElementLastModalWasOpenedFor = null; 
}); 

$("#test").focus(function (event) { 
    thisID = $this.attr("id"); 
    if(idOfTheElementLastModalWasOpenedFor != thisID){   
     idOfTheElementLastModalWasOpenedFor = thisID; 
     $("#dialog").dialog("open"); 
    } 
});

並以完善的用戶體驗，你可能想要做這樣的事情：

var idOfTheElementLastModalWasOpenedFor = null; 
$(":focusable:not(#test)").focus(function() { 
    idOfTheElementLastModalWasOpenedFor = null; 
}); 

function openMyModal(event) { 
    $thisID = $this.attr("id"); 
    if(event.type == "click" || idOfTheElementLastModalWasOpenedFor != $thisID){   
     idOfTheElementLastModalWasOpenedFor = $thisID; 
     $("#dialog").dialog("open"); 
    } 
};  

$("#test").focus(openMyModal); 
$("#test").click(openMyModal);

來源

2015-10-02 21:46:00

Dialog的關閉事件觸發焦點事件並導致無限循環

回答

相關問題