jQuery 对话框未捕获控件 - IE 9.0
Posted
技术标签:
【中文标题】jQuery 对话框未捕获控件 - IE 9.0【英文标题】：jQuery dialog box not capturing control - IE 9.0 【发布时间】：2013-05-28 03:21:37 【问题描述】：我的页面上有一个 CSS 吸盘鱼侧菜单。当用户点击页面中的某个项目时，我会弹出一个 jQuery UI 对话框，并且在页面上的一个 div 中，我正在通过 jQuery AJAX 加载一个 html 页面。
在 Chrome 中，每当我单击菜单上的某个项目时，焦点就会从菜单转移到 jQuery UI 对话框上。
但在 IE 和 Opera 中，即使我单击了该项目，焦点仍保留在菜单上。 jQuery UI 对话框无法将焦点从菜单上移开，因此它保持打开状态并挡住了用户的视线。
请看附件图片。
如您所见，我什至添加了一个文本框并在那里抓住了焦点，但即便如此也没有任何变化。
根据要求，here is a link to the website。
示例：当您在 IE 9 中打开网站并点击说 Technologies > MySQL 或 Technologies> MSSQL 时，菜单不会关闭，但它应该是因为我在加载 div 后面的页面时打开了一个模式对话框。但是，如果您在 chrome 中打开页面并尝试相同的操作，则菜单会按原样关闭。 附上相关代码sn-ps：-
/**********************************************
Function to load an html page inside a div
**********************************************/
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction)
var parentDiv = $("#" + containerDiv);
var loadDiv = $("#" + divToLoadIn);
var dialogBox = $("#" + loadingDialog);
// Show dialog box first, then fadeOut, then load, then fadeIn,the close.
$(dialogBox).data('loadDiv', loadDiv).dialog("open");
$(loadDiv).load(pageToLoad, function (response, status, xhr)
if (response == "error")
$(dialogBox).dialog('close');
else
if (callBackFunction != null)
callBackFunction();
checkAndDisplay(loadingDialog, divToLoadIn);
);
初始化jquery-ui对话框的函数。
/**************************************
Function to initialize the dialog box
*****************************************/
function initializePleaseWaitDialog()
$("#osmPleaseWait").dialog(
autoOpen: false,
modal: true,
dialogClass: 'noTitleDialog',
draggable: false,
resizable: false
);
切换DIV显示的功能
/***************************************
Function to toggle div display
****************************************/
function checkAndDisplay(dialogToHide, divToShow)
$("#" + divToShow).css('display', 'block');
$("#" + dialogToHide).dialog("close");
更新 #3：我尝试了另一种方法，在 菜单项的单击事件上，我隐藏了所有辅助 div。
$(".osmMenuObject,.mainCatHeaderWithoutChild").click(function ()
// Currently Selected
$(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
$(this).addClass("osmServiceListSelected");
// Hiding the div**
$(".secondaryMenuContainer").css('display', 'none');
var pageToLoad = $(this).children("input[type='hidden']").val();
loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
return false;
);
然后我更新了checkAndDisplay中的代码，去掉了我之前添加的显示属性，但还是不行。
function checkAndDisplay(dialogToHide, divToShow)
$("#" + dialogToHide).dialog("close");
$("#" + divToShow).css('display', 'block');
$(".secondaryMenuContainer").css('display', '');
HERE 是页面的标记。
<div class="osmListContainerSpecial">
<div class="osmListHeader" id="osmListHeaderServices">
Our Services
</div>
<div class="mainCatHeader">
Software Development
</div>
<%-- Technologies --%>
<div class="secondCatHeader">
Technologies
<div class="secondaryMenuContainer" id="softwareDevTech">
<div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
<div class="osmMenuObject">
.NET/ C#
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
<div class="shortMenuDesc">
Our primary area of expertise, with over 5 years of experience.</div>
</div>
<div class="osmMenuObject">
MS-SQL
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" />
<div class="shortMenuDesc">
We have been working with SQL for over 6 years now.</div>
</div>
<div class="osmMenuObject">
mysql
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" />
<div class="shortMenuDesc">
Open Source Database for faster, hassle-free deployment.</div>
</div>
<div class="osmMenuObject">
Silverlight
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
MVC
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Azure
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
<%-- Applications --%>
<div class="secondCatHeader">
Applications
<div class="secondaryMenuContainer" id="softwareDevApp">
<div class="secondaryMenu">
<div id="appMsCRM" class="osmMenuObject">
Microsoft CRM
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
<div class="shortMenuDesc">
Our primary area of expertise, with over 5 years of experience.</div>
</div>
<div id="appQb" class="osmMenuObject">
QuickBooks
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appGP" class="osmMenuObject">
Great Plains
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appSP" class="osmMenuObject">
Sharepoint
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appXero" class="osmMenuObject">
Xero
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appFB" class="osmMenuObject">
Freshbooks
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appSF" class="osmMenuObject">
SalesForce
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appNav" class="osmMenuObject">
Navision
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
<%-- Independent Software Testing --%>
<div class="mainCatHeaderWithoutChild">
Independent Software Testing
<input type="hidden" value="ServicesHTML/Testing.html" />
</div>
<%-- Technnical Documentation --%>
<div class="mainCatHeaderWithoutChild">
Technnical Documentation
<input type="hidden" value="ServicesHTML/Documentation.html" />
</div>
<%-- Case Studies --%>
<div class="mainCatHeaderWithChild">
Case Studies
<div class="secondaryMenuContainer">
<div class="secondaryMenu" style="COLOR: #3e3e3e">
<div class="osmMenuObject">
Media - Astral
<input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Waste Disposal - RGMRM
<input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Insurance - IAAH
<input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Housing Providers - TalonPro
<input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Education and Training - Met Film
<input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Industry - Bates
<input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Industry - Atdec
<input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
</div>
如果您需要任何其他代码或有任何其他疑问，请告诉我。
【问题讨论】：
我们应该如何帮助您，使用 Photoshop？我的意思是，你能提供一些相关的代码吗？也许设置一个 jsfiddle 来重现您的问题，或者设置一个链接来查看发生了什么。 也许您能告诉我们如何重现您的错误？我在 IE10 下模拟的 IE9 上进行了测试，看不到任何错误，但我仍然不确定如何重现您正在谈论的错误 我已经提供了所有必要的链接和描述，为什么这个问题仍然被否决？ 问题大大改进并重新打开。 这是一个很好的改进问题，但在 IE9 模拟模式下仍然对我来说，我无法重现您的问题 【参考方案1】：据我所知，第 1101 行和第 1109 行之间存在 CSS 冲突。您已将 .secondaryMenuContainer 设置为 DISPLAY: none;，但随后在 .secondCatHeader:hover; 上将其设置为 DISPLAY: block;
jQuery UI 对话框不会否定hover 条件，因此您的.secondaryMenuContainer 永远不会恢复为DISPLAY: none;
$(".secondaryMenuContainer").css('display', ''); 不起作用，因为它设置了无效的内联样式，因此浏览器恢复为显示有效的外部样式，在这种情况下 DISPLAY: block; 因为用户的 hover 仍然没有中断。如果您希望.secondaryMenuContainer 简单地级联回其DISPLAY: none; 状态，则必须中断用户的悬停。
一种方法是在对话框加载时创建一个空的div；一个 z-index 高于您的 .secondaryMenuContainer 并占据整个窗口。然后，当对话框淡出时，您将删除该 div。这应该会破坏用户的悬停并允许 div 的样式级联回DISPLAY: none;
编辑： 因为这是 jQuery UI，所以模态框应该加载一个 .ui-widget-overlay，这正是我所描述的。该函数在e.widget._createOverlay @jquery-ui-1.10.1.custom.min.js:6 的堆栈中被调用，但它并没有按照预期的方式停止页面交互。
【讨论】：
是的，正是我的意思，因为我已经在显示模式对话框，它应该将焦点从菜单上移开。那没有发生。顺便说一句.css('display', ''); 不是非法的，请查看以下链接。 ***.com/questions/2465158/…【参考方案2】：
这似乎是一种比赛条件。我不确定“为什么”部分，但这似乎解决了这个问题：
将您的 checkAndDisplay 函数替换为以下版本：
function checkAndDisplay(dialogToHide, divToShow)
$("#" + divToShow).css('display', 'block');
setTimeout(function()
$("#" + dialogToHide).dialog("close");
,500);
编辑：似乎 Internet Explorer 存在一个错误，除了鼠标移动之外，它不会刷新“悬停”状态。这是一个可重现的样本。尝试在不同的浏览器中单击绿色区域，不要移动鼠标。 http://jsfiddle.net/5LR8Z/
我没有找到针对该特定错误的任何解决方案。作为一种解决方法，我会尝试手动关闭菜单（在点击处理程序上设置一个变量以了解在您的 checkAndDisplay 函数上要关闭哪个菜单）。
【讨论】：
我以前试过这个，如果你添加这个代码然后点击鼠标，并且不要移动你的鼠标哪怕一点点，菜单都会保持打开状态。这不是最可靠的解决方案。不过还是谢谢。 检查我的编辑。谢谢你的问题，我不知道那个特定的错误。 在下面查看我的答案，我正在使用您建议的更简单版本，这似乎有效。【参考方案3】：好的，因为没有适当的解决方法。这是我为规避问题所做的。有些人可能认为这有点 hack-y，但我找不到任何其他解决方案。
如果您查看我的第三次更新，我将隐藏二级菜单，
$(".osmMenuObject,.mainCatHeaderWithoutChild").click(function ()
// Currently Selected
$(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
$(this).addClass("osmServiceListSelected");
// Hiding the div || THIS WAS NEW
$(".secondaryMenuContainer").css('display', 'none');
var pageToLoad = $(this).children("input[type='hidden']").val();
loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
return false;
);
现在在document.ready() 事件本身中，我正在添加另一个事件。
$(".secondCatHeader,.mainCatHeaderWithChild").hover(function ()
$(this).children(".secondaryMenuContainer").css('display', '');
)
现在这将做的是，每当我们将鼠标悬停在其中一个菜单项上，并且它有一个类为 .secondaryMenuContainer 的子项时，它会清除该类的内联显示。这样我之前设置的display:none就会被清除。我已经用 IE 9.0 和 Opera 对此进行了测试，它似乎工作正常。
谢谢大家。
【讨论】：
以上是关于jQuery 对话框未捕获控件 - IE 9.0的主要内容，如果未能解决你的问题，请参考以下文章
Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义 / 无法读取属性 'msie' ]