JS - 如何避免通用点击处理程序窃取焦点

Question

我使用纯 JavaScript（无 JQuery 等）来显示半模式对话框，其中包含一个小表单。 按照我目前设置的方式，如果用户单击页面的不同部分，相同的处理程序将显示不同的对话框。但是，如果用户单击对话框中的 INPUT 字段，则单击会传播/冒泡到处理程序，并且 INPUT 会失去焦点 - 键入它的唯一方法是按 TAB 键，这并不完全理想！

关于如何避免这种情况有什么建议吗？

Answer 1

您可以将

click

处理程序附加到对话框的主元素，并在此时停止传播：

theDialogMainElement.addEventListener("click", function(e) {
    e.stopPropagation();
}, false);

这样，在对话框中单击就不会传播到干扰页面上的单击处理程序。

如果您需要支持没有

addEventListener

和

stopPropagation

的旧版 IE（IE8 及更早版本），请参阅此其他答案以获取跨浏览器事件连接功能（它也提供

stopPropagation

).

Answer 2

您可以在您引用的特定输入元素上调用 .focus() 。 http://www.w3schools.com/jsref/met_html_focus.asp