求助，下拉框选择问题
本帖最后由 zhaozhang 于 2024-3-8 23:04 编辑> 本帖最后由 zhaozhang 于 2024-3-8 23:04 编辑
> 本帖最后由 zhaozhang 于 2024-3-8 23:02 编辑
新手求助：
input作为输入框，div作为弹出框，点击input按钮时，弹出下拉框。
input可以使用dispatchEvent(new Event("focus"));使下拉框弹出，但下拉框的div使用click（），点击无反应。如何才能达到点击下拉选项效果。
<br>
网页代码如下：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#searchDiv {
border:black 1px solid;
position:absolute;
width:300px;
}
</style>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<form id="form1" runat="server">
<div>
<input id="select-input" name="select-input" style="position:relative" />
<div id="searchDiv" style="display:none;">
<div name="searchDiv1">111111111111</div>
<div name="searchDiv1">222222222222</div>
<div name="searchDiv1">333333333333</div>
<div name="searchDiv1">444444444444</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).on("mouseover","div",function(){
this.style.backgroundColor='blue';
});
$(document).on("mouseout","div",function(){
this.style.backgroundColor='white';
});
//这里的作用是当点击下拉内容时,把对应的值赋给文本框,达到select的效果(这里不用做下拉的隐藏,因为当用户点击下拉内容的同时会触发input的失焦blur)
//注意:为什么这里用的是鼠标按下事件onmousedown而不是点击事件onclick,
//点击的触发条件鼠标按下再抬起才会触发, 当鼠标按下时会触发input失焦,会隐藏下拉内容,所以如果注册的是onclick事件,那么很容易点不到下拉内容,所以注册的是鼠标按下时就触发
$(document).on("mousedown","div",function(){
$("#select-input").val(this.innerText);
});
$("#select-input").on("focus", function () {
$("#searchDiv").show();
})
//失焦后延时10ms执行，避免失焦后searchDiv立即隐藏点不到里面的元素的问题
$("#select-input").on("blur", function () {
setTimeout(function(){
$("#searchDiv").hide();
},"10")
})
</script>
</body>
</html>
```
李恒道 发表于 2024-3-9 15:40
方便的话我远程看一下吧
QQ4548212
感谢李恒道大佬的帮助，虽然是个小问题，但梗了我3天了，李大佬的指点，瞬间通透。
以下是解决方法：根据
$(document).on("mousedown","div",function(){
$("#select-input").val(this.innerText);
});
可知，mousedown的触发不在div,而在document，所以使用https://learn.scriptcat.org/%E6% ... %E8%A7%A6%E5%8F%91/提到的Event 函数，并设置冒泡，将事件逐级扩展，到达document一级，就能触发。
试了一下：
var b=document.querySelectorAll(("div#searchDiv div");
b.dispatchEvent(new Event("mousedown",{bubbles:true,cancelable:true,composed:true}));
果然搞定，input框里出现了被选中"444444444444".
个人是如此理解的,如有误，还请批评指正，再次感谢大佬帮助。 zhaozhang 发表于 2024-3-9 15:14
大佬，如何挨个监听器打进去看执行代码来分析流程，以及直接拿框架诸如点 ...
https://learn.scriptcat.org/%E6% ... %E8%A7%A6%E5%8F%91/
我发的是一点不看{:4_98:}
处理流程直接在事件监听里点进去就可以了
本帖最后由 zhaozhang 于 2024-3-9 21:30 编辑
可保存为html文件直接运行，代码形成的效果。
@李恒道 @王一之
大佬，求助{:4_88:} 不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程
也可以直接拿框架诸如点
https://learn.scriptcat.org/%E6% ... %E8%A7%A6%E5%8F%91/
看你贴的代码来说
//这里的作用是当点击下拉内容时,把对应的值赋给文本框,达到select的效果(这里不用做下拉的隐藏,因为当用户点击下拉内容的同时会触发input的失焦blur) //注意:为什么这里用的是鼠标按下事件onmousedown而不是点击事件onclick, //点击的触发条件鼠标按下再抬起才会触发, 当鼠标按下时会触发input失焦,会隐藏下拉内容,所以如果注册的是onclick事件,那么很容易点不到下拉内容,所以注册的是鼠标按下时就触发 $(document).on("mousedown","div",function(){ $("#select-input").val(this.innerText); });
这里用的是mosedown吧
为啥要触发click
李恒道 发表于 2024-3-9 01:33
不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程
大佬，div的mousedown也试过了，还是不行，使用的是对div控件使用dispatchEvent(new Event("mousedown"))。
这个网页是我根据内网代码，结合网上资料，找到比较相近的代码，可以直接保存运行测试，但就是无法模拟点击到按钮，如果是手动鼠标点击正常选中并显示。 @cxxjackie @王一之 各位大佬，帮忙看看 zhaozhang 发表于 2024-3-9 09:13
大佬，div的mousedown也试过了，还是不行，使用的是对div控件使用dispatchEvent(new Event("mousedown")) ...
看我前面说的
-----------------
不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程
也可以直接拿框架诸如点 大佬，以下是F12查看的代码及监听 zhaozhang 发表于 2024-3-9 14:58
大佬，以下是F12查看的代码及监听
搞错重点了
这个还是你自己写的吧
你先尝试理解我说的
按教程一步一步对着自己的网页走
尝试去分析逻辑
给我们截图没用的
先排，排完了之后挨个触发
还不行打框架
不过按哥哥目前对事件的理解我个人认为还没达到能解决的门槛...
还是推荐先打打基础
页:
[1]
2