【发布时间】：2023-03-23 16:48:01
【问题描述】：
我希望我的 (ExtJS) 工具栏按钮不是在被点击时抓住网页上的焦点，而是在通过点击保持焦点不变的同时做他们的“事情”。我该怎么做？
【问题讨论】：
-
我认为您可以更改已接受的答案，并选择最受好评的答案，这将对阅读此有用问题的人们有很大帮助。
标签： javascript button extjs focus
【发布时间】：2023-03-23 16:48:01
【问题描述】：
取消onmousedown的默认行为会阻止元素获得焦点：
// Prevent capturing focus by the button.
$('button').on('mousedown',
/** @param {!jQuery.Event} event */
function(event) {
event.preventDefault();
}
);
【讨论】：
document.activeElement 存储当前聚焦的元素。
所以在你的工具栏上，你可以为这个函数添加一个“mousedown”处理程序：
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
试试这个例子：
<html>
<head>
<script>
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>
【讨论】：
-
document.activeElement 是 HTML5 的一部分。只有 Firefox2 和 Safari 不支持它，但据报道，Safari 的最后一个夜间版本支持它。
-
由于您使用的是 onmousedown，您可以只使用 preventDefault 而不必费心存储当前活动的元素，因为它永远不会获得焦点。但是，您可能希望在大约 500 毫秒后使用计时器撤消该按钮以显示该按钮已被单击。
这通常对我有用：
<button
tabindex="-1"
onclick="javascript:console.log('do your thing')"
>My Button</button>
来自https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex：
负值（通常为
tabindex="-1"）表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。使用 JavaScript 创建可访问的小部件非常有用。
【讨论】：
我认为没有一种简单的方法可以做你想做的事情，因为这是浏览器的默认行为。
您当然可以在单击按钮后立即 blur() 按钮，但这只会取消选择所有内容。要让先前活动的对象重新获得焦点，您必须通过为每个元素添加模糊处理程序来创建各种“记忆”，以跟踪哪个元素最后拥有/失去焦点（将元素的 id 存储在全局并在元素失去焦点时更新它）。
【讨论】：
投票最多的答案在技术上是正确的，但取决于 jQuery...
这是一个更简单的例子：
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"></span>
【讨论】：
-
问题是要求多个按钮，而不仅仅是一个。
我的解决方案是将<button /> 替换为<div /> 并将其设置为按钮。
当您单击 Div 时，它似乎没有关注它。
【讨论】：
因为工具栏按钮只是样式化的普通 HTML 按钮元素，所以这是一种实际的浏览器行为，您应该在更改之前三思而后行。不过还是...
您应该能够通过从其onclick 处理程序返回false 来防止按钮接收焦点。
【讨论】：
-
谢谢 Rene 我认为这是正确的方法，但是当我尝试时它似乎不起作用。 ATM 我已经实现了一个讨厌的解决方案，在每个表单上我设置默认值： { onBlur: fieldExit } 其中 fieldExit 将调用对象放入 lastField 变量，然后在按钮处理程序的末尾（它们都使用相同的）我做lastField.focus()。这适用于文本字段，但奇怪的是不适用于复选框（我还没有测试过其他的）。
-
你可以阻止按钮保持焦点，但是你不能在不跟踪的情况下将焦点返回到前一个元素
-
当点击触发时，取消焦点为时已晚。正如我上面所说，应该在 onmousedown 中防止默认行为。它不会阻止“onclick”，但会阻止焦点更改。至少在 Webkit 浏览器中。
也许您应该尝试使用stateful 和表单字段的状态更改属性或其他任何东西来重新获得焦点？
【讨论】：
我会将一个模糊事件侦听器附加到所有字段。此侦听器应将失去焦点的字段保存在全局变量中。
那么所有的工具栏按钮都应该有一个焦点事件监听器。此侦听器应关注按上述方式保存的字段。
这段代码应该可以工作，虽然它没有测试过
【讨论】：
<script>
function focusor(){
document.getElementById('focus').focus;
}
document.onkeydown = focusor;
document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
<button id="focus"></button>
</div>
我发现，你必须制作一个虚拟元素，我发现按钮在这种情况下效果最好。将按钮放在一个 div 中并使 div 为 0px。
[不要让 div 不显示，有些浏览器会忽略它]
基本上任何点击或按钮按下，它都会专注于这个虚拟按钮。 我有一个非常相似的项目，每当他们按下向下键时，它就会选择页面上的第一个按钮，这只是一遍又一遍地关注按钮。
有点夸张，但它有效。
【讨论】：
所有这些答案都很古怪。这是一个非常棒的技巧，只使用 CSS
<button type="submit" disabled>
<span>Submit</span> <!-- the <span> is the secret -->
</button>
现在在你的 CSS 中：
button[disabled] > * {
pointer-events: none;
}
诀窍是必须使用内部跨度，否则按钮仍会从输入中窃取焦点。
【讨论】：