我有以下 html 文件:
<!DOCTYPE html>
<html>
<head>
<link href="example.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form class="search">
<div class="search_box">
<input type="text" name="q" id="search_text" placeholder="Search..." />
<ul id="search_results" class="results" >
<li><a href="">Search Result #1<br /><span>Description...</span></a></li>
<li><a href="">Search Result #2<br /><span>Description...</span></a></li>
</ul>
</div>
</form>
<script type="text/javascript">
$(document).on('click', '#search_results li',function(i) {
i.preventDefault();
console.log('clicked');
});
</script>
</body>
</html>
CSS 看起来像这样:
.search .search_box input:focus + .results { visibility: visible }
.search .search_box .results {
visibility:hidden;
}
如果未包含 css，文档将按预期工作并在单击其中一个 anchor 标记时打印“已单击”，但包含 css 时则不会。
所以我怀疑该元素在执行 javascript 之前被隐藏了。与隐藏和切换 javascript 语句相比，我真的更喜欢 css 解决方案。
有没有办法解决这个问题？
最佳答案
将 click() 更改为 mousedown()。单击事件包括鼠标向上注册，此时焦点已经丢失。
$(document).on('mousedown', '#search_results li', function (i) {
i.preventDefault();
console.log('clicked');
});
关于javascript - 在 CSS 之前执行 JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22175222/