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

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

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

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

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>

---------------------