gpt4 book ai didi

javascript - Windows 8/8.1 JQuery 上的 IE 11 is() 和 has() 不包含可滚动 div 的滚动条

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:43:34 24 4
gpt4 key购买 nike

我已经实现了此处找到的解决方案: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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com