所以我有一个带有库存的搜索栏。搜索栏由一个无序列表组成,列表项的内部有锚点。每个锚点都具有指向该所列项目特定页面的href。我遇到的问题(我认为)是锚点上的mouse-click-down事件使其消失,因此应该触发重定向到href的mouse-click-up事件从未触发,因为列表项已经存在到那时消失了。我发现了这篇文章:Anchor tag not working inside List Item
它似乎引用了类似的问题,我认为我可以使用以下方法将jquery导入到我的html文件的头部:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
I then thought I could just put
<script>
$("a").mousedown(function(ev) {
ev.preventDefault();
}
</script>
inside the head tag but it doesn't work, does anyone have any insights?
The search bar list looks like:
<input style="border-radius: 7px 0px 0px 7px; border-right: 0px; resize:
none" id="myInput" onkeyup="myFunction()" name="searchedItem" rows="1"
class="form-control" form="searchForm" placeholder="What can we help you
find?">
<ul id="myUL">
<li><a href="#">Air Tile Chipper</a></li>
<li><a href="#">Compressor (Electric)</a></li>
</ul>
and the javascript it runs on is
<script>
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus", function(){
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
// This is when you want to find words that contain the search
string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
使用event.preventDefault不会停止其他事件的执行。尝试使用return false或event.stopImmediatePropogation。