鼠标移至select下拉框自动展开的尝试与探索，思路竟有误？

hwyzw

    我本来的目的：是想实现鼠标移动到下拉框上，下拉框自动展开。

    先前设想通过()鼠标动作触发一个()函数，该函数内调用()操作，自认为这样即可完成（相关代码展示），结果发现我考虑得过于草率。

    我在网上进行了一下的搜索：

    1. 鼠标移动到下拉框自动展开

    2. 鼠标悬停自动展开

    3. ………..等一系列，

    没有一种结果符合我的预期，只有鼠标的部分事件不是我所期望的。有人建议用div来模拟下拉框，但这并非我所寻求的方案，我期待的是鼠标悬停时能自动展开内容。另有人指出没有自动展开的属性，于是我去查询了相关属性，具体情况如下所示。

    马上就懂了，原先我以为我执行.();操作就是点中了选择框，这个想法完全错误，真是天大的误会！！！！！！

    后来我又去百度搜寻我需要的信息，花了不少时间，最后总算发现了一件东西，能够帮我达成我期望的目标（真有高手，让我立刻佩服得五体投地！），最终的代码是：

    解决问题的核心代码是以下这个函数：

     demo(){

    .focus();

   

    var  = new (".Shell");

    try {

    .("%{DOWN}");

    } catch(e){}

    .Quit;

    这个函数我并不了解，专家指出“这段程序似乎仅在IE浏览器中能正常运行”，我进行验证后发现情况确实如此，并且还出现了一个缺陷（估计涉及保密性方面的问题，我没有深入探究过）：

    还有：

    因此基于前述内容，我归纳如下：尽管先前提及的方案能够达成鼠标置于下拉列表时自动展开的操作，却伴随若干缺陷，诸如安全风险、跨浏览器适配不良等，换言之，我认为或许在具体项目实施阶段并不适宜采用，相当一部分替代方案选择借助div元素来模拟达成相似功能。上午钻研了很久，依然有所收获，期间多次想要放弃，但内心始终认为肯定有办法，于是不断搜集资料，算是给自己一个交代吧O(∩_∩)O哈哈~，盼望这份微薄的学习能帮到后来者，倘若有人看到这篇文章并掌握更优的解决方法，期待你能告知我，一起探讨共同提高。

    终极解决办法部分兼容：

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre class="has"><code>执行特定操作时，针对台式机环境，仅适用于UC浏览器和苹果系统，而在移动设备上，则兼容安卓、IOS系统以及微信和钉钉应用。
            if (document.createEvent) {
                console.log(111);
                //elem.focus();

创建一个鼠标事件对象，命名为e
e触发鼠标按下事件，标记为模拟事件，允许冒泡，事件发生在当前窗口，坐标为x0, y0，没有按钮按下，没有位移，没有额外数据，没有控制键，没有alt键，没有shift键，没有meta键，没有相关元素，没有回调函数
                elem.dispatchEvent(e);
            } else if (elem.fireEvent) {
                console.log(222);
elem触发按下事件,elem执行鼠标按下操作,elem响应鼠标按下行为
            }
        }
</code></pre></p>
    ---------------------