我已经实现了此处找到的解决方案:https://stackoverflow.com/a/7385673/1766862如果用户在包含的 div 之外单击，则隐藏建议的 div 列表。
虽然在 IE 11 中单击滚动条会导致框关闭，但我刚刚收到一个错误报告。我在带有 Safari、Chrome、Firefox 和 IE 11 的 Windows 8.1 上对其进行了测试，IE 是导致此行为的唯一原因。
JSFiddle 显示错误:http://jsfiddle.net/wfgLohvx/2/
is() 和 has() 似乎不包括 IE 中的滚动条。
JS:
$(document).on('click', '#topics', function() {
popover('topics', 'results', 0);
});
$(document).mouseup(function (e)
{
var topic_container = $("#topic_container");
if (!topic_container.is(e.target) // if the target of the click isn't the container...
&& topic_container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#results').slideUp();
}
});
function popover(element_id, div_id)
{
var element_offset = $('#'+element_id).offset();
$('#'+div_id).css({ top: element_offset.top, left: element_offset.left + $('#'+element_id).width()});
var new_offset = $('#'+div_id).offset();
$('#'+div_id).show();
}
HTML:
<div id="topic_container">
<input type="text" id="topics" />
<div id="results">
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
</div>
</div>
CSS:
#results {
display: none;
height: 100px;
overflow: scroll;
}
.result_row {
cursor: pointer;
border: 1px solid black;
}
单页 HTML/CSS/JS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>IE Windows 8 scrollbar error</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
#results {
display: none;
height: 100px;
overflow: scroll;
}
.result_row {
cursor: pointer;
border: 1px solid black;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).on('click', '#topics', function() {
popover('topics', 'results', 0);
});
$(document).mouseup(function (e)
{
var topic_container = $("#topic_container");
if (!topic_container.is(e.target) // if the target of the click isn't the container...
&& topic_container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#results').slideUp();
}
});
function popover(element_id, div_id)
{
var element_offset = $('#'+element_id).offset();
$('#'+div_id).css({ top: element_offset.top, left: element_offset.left + $('#'+element_id).width()});
var new_offset = $('#'+div_id).offset();
$('#'+div_id).show();
}
//]]>
</script>
</head>
<body>
<div id="topic_container">
<input type="text" id="topics" />
<div id="results">
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
<div class="result_row">value</div>
</div>
</div>
</body>
</html>
最佳答案
事实证明，Microsoft 的修复速度很慢。如果您现在需要滚动值，我建议您使用其他 JS/jQuery 函数来获取滚动值并将它们填充到您通过 is() 或 has() 获得的结果中 - 在您等待他们对您的错误的响应时。
关于javascript - Windows 8/8.1 JQuery 上的 IE 11 is() 和 has() 不包含可滚动 div 的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27930870/