求助，下拉框选择问题

zhaozhang · 发表于 2024-3-8 22:55:39

本帖最后由 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（），点击无反应。如何才能达到点击下拉选项效果。

网页代码如下：

<!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[name=searchDiv1]",function(){
        this.style.backgroundColor='blue';
    });
    $(document).on("mouseout","div[name=searchDiv1]",function(){
        this.style.backgroundColor='white';
    });

    //这里的作用是当点击下拉内容时,把对应的值赋给文本框,达到select的效果(这里不用做下拉的隐藏,因为当用户点击下拉内容的同时会触发input的失焦blur)
    //注意:为什么这里用的是鼠标按下事件onmousedown而不是点击事件onclick,
    //点击的触发条件鼠标按下再抬起才会触发, 当鼠标按下时会触发input失焦,会隐藏下拉内容,所以如果注册的是onclick事件,那么很容易点不到下拉内容,所以注册的是鼠标按下时就触发
    $(document).on("mousedown","div[name=searchDiv1]",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>

zhaozhang · 发表于 2024-3-9 21:09:54

李恒道发表于 2024-3-9 15:40
方便的话我远程看一下吧
QQ4548212

感谢李恒道大佬的帮助，虽然是个小问题，但梗了我3天了，李大佬的指点，瞬间通透。
以下是解决方法：根据
$(document).on("mousedown","div[name=searchDiv1]",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")[3];
b.dispatchEvent(new Event("mousedown",{bubbles:true,cancelable:true,composed:true}));
果然搞定，input框里出现了被选中"444444444444".

个人是如此理解的,如有误，还请批评指正，再次感谢大佬帮助。

李恒道 · 发表于 2024-3-8 22:55:40

zhaozhang 发表于 2024-3-9 15:14
大佬，如何挨个监听器打进去看执行代码来分析流程，以及直接拿框架诸如点 ...

https://learn.scriptcat.org/%E6% ... %E8%A7%A6%E5%8F%91/

我发的是一点不看

处理流程直接在事件监听里点进去就可以了

zhaozhang · 发表于 2024-3-8 23:05:59

本帖最后由 zhaozhang 于 2024-3-9 21:30 编辑

可保存为html文件直接运行，代码形成的效果。

zhaozhang · 发表于 2024-3-8 23:37:17

@李恒道 @王一之
大佬，求助

李恒道 · 发表于 2024-3-9 01:33:42

不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程
也可以直接拿框架诸如点
https://learn.scriptcat.org/%E6% ... %E8%A7%A6%E5%8F%91/

看你贴的代码来说
//这里的作用是当点击下拉内容时,把对应的值赋给文本框,达到select的效果(这里不用做下拉的隐藏,因为当用户点击下拉内容的同时会触发input的失焦blur) //注意:为什么这里用的是鼠标按下事件onmousedown而不是点击事件onclick, //点击的触发条件鼠标按下再抬起才会触发, 当鼠标按下时会触发input失焦,会隐藏下拉内容,所以如果注册的是onclick事件,那么很容易点不到下拉内容,所以注册的是鼠标按下时就触发 $(document).on("mousedown","div[name=searchDiv1]",function(){ $("#select-input").val(this.innerText); });
这里用的是mosedown吧
为啥要触发click

zhaozhang · 发表于 2024-3-9 09:13:04

李恒道发表于 2024-3-9 01:33
不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程

大佬，div的mousedown也试过了，还是不行，使用的是对div控件使用dispatchEvent(new Event("mousedown"))。
这个网页是我根据内网代码，结合网上资料，找到比较相近的代码，可以直接保存运行测试，但就是无法模拟点击到按钮，如果是手动鼠标点击正常选中并显示。

zhaozhang · 发表于 2024-3-9 10:56:15

@cxxjackie @王一之各位大佬，帮忙看看

李恒道 · 发表于 2024-3-9 13:30:03

zhaozhang 发表于 2024-3-9 09:13
大佬，div的mousedown也试过了，还是不行，使用的是对div控件使用dispatchEvent(new Event("mousedown")) ...

看我前面说的
-----------------
不要去凭感觉猜
直接列出来事件监听器按用户的触发流程排序
挨个监听器打进去看执行代码来分析流程
也可以直接拿框架诸如点

zhaozhang · 发表于 2024-3-9 14:58:01

大佬，以下是F12查看的代码及监听

李恒道 · 发表于 2024-3-9 15:10:16

zhaozhang 发表于 2024-3-9 14:58
大佬，以下是F12查看的代码及监听

搞错重点了
这个还是你自己写的吧
你先尝试理解我说的
按教程一步一步对着自己的网页走
尝试去分析逻辑
给我们截图没用的
先排，排完了之后挨个触发
还不行打框架
不过按哥哥目前对事件的理解我个人认为还没达到能解决的门槛...
还是推荐先打打基础

求助，下拉框选择问题

最佳答案

发表回复

荣誉开发者

喜迎中秋

油中2周年

生态建设者