捕捉JavaScript焦点的有效方法总结

1.设置元素以获得监视键盘事件的焦点。element focus最大的优点是它允许发送键盘事件。默认情况下，许多HTML元素可以被聚焦，例如表单元素和锚定链接a，但是默认情况下，大多数元素不能被聚焦。为了使元素集中，可以用HTML代码或JavaScript脚本来实现。Html:复制代码如下： div tabindex=' 0 ' style=' height :100 px；宽度width:100pxbackground:red'/div JavaScript : Odiv . tabindex=0；其中TABIndex是tab键的导航顺序，可以是正数、负数或零。当元素获得焦点时，它将由边框指示。如果不想显示此边框，可以将html:中的代码复制如下： div tabindex=' 0 ' hide focus=' on '/div JAVAScript 3360 odiv。hidefocus=' on2.元素清楚地设置了焦点，但是没有效果。有时候会用JavaScript来设置元素的焦点，但是最后的焦点并没有落在元素上，令人费解。问题是，如果其他元素在focusable元素的事件处理函数中被聚焦，就有可能失去焦点，因为如果事件是可以获得焦点的事件，比如鼠标、keydow(按键)等。它无法在事件处理函数中直接关注其他元素。复制代码如下： odv . onmousedown=function(){ document . getelementbyid(' ipt ')。焦点()；};参考浏览器内核处理流程图： 。

浏览器第一次回流后，焦点停在另一个元素上，但回流返回后，事件处理后的默认操作将继续，即关注事件源，即mousedown的元素，这将导致第二次回流，回流后，焦点在这个元素上。因此，事件处理功能中的焦点变得无效。有什么解决办法吗？答案是肯定的。从图中可以看出，只需要将焦点放在第二次回流上，然后执行即可。这可以通过setTimeout方法来延迟，然后将其放入队列中，然后执行它。由于JavaScript引擎的单线程特性，图中的整个流程都是连续执行的，JS引擎在这个过程中从来没有空闲过。当以上操作全部完成合并后，就可以执行定时回调了。因此，代码可以复制为：如下所示： odiv。onmousedown=function(){ settimeout(function(){ document。getelementbyid ('ipt ')。焦点()；}, 0);};从上面可以看出，最后一毫秒是否设置为0并不重要。3.在IE中，如果元素在不可见时被聚焦，就会抛出一个异常，因为在很多应用中，我们倾向于聚焦而不测试元素是否不可见，因为即使这样也没有问题(谁说不可见的元素不能聚焦？).因此，可以使用try{}catch(){}来忽略IE下的这个异常。复制的代码如下： try { element . focus()；}catch(e){}至此，关于JavaScript焦点捕捉相关问题的讨论结束。