js 输入框获取焦点显示div 失去焦点隐藏div 点击div也消失了怎么解决

Posted 2023-04-24

<input type="text" id="td"> <div id="td1" style="width:100px;height:100px;background:red; display:none;" tabindex=0></div> <script> var a = document.getElementById('td'); var a1 = document.getElementById('td1'); var p=null; console.log(a); a.onfocus = function() a1.style.display='block'; a.onblur = function() p=setTimeout(function() a1.style.display='none'; ,300); a1.onclick = function() a1.onfocus = function() clearTimeout(p); a1.onblur = function() a1.style.display = 'none'; </script>

参考技术A 应该是获取焦点对象不准确导致，举个例子，获取iuput焦点的时候显示div失去这隐藏可以给这个input和这个div一个id，还有就是这个input和这个div是同级关系不能是嵌套 参考技术B 你好！
应该是获取焦点对象不准确导致，举个例子，获取iuput焦点的时候显示div失去这隐藏可以给这个input和这个div一个id，还有就是这个input和这个div是同级关系不能是嵌套
仅代表个人观点，不喜勿喷，谢谢。

JS—事件类型（焦点事件、鼠标事件（部分））

参考技术A 【需要注意】虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。

只定义了div2即棕色的那个div的事件
【解释enter与leave】：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。
【解释over与out】：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。
【总结】mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。