我希望我的（ExtJS）工具栏按钮在被点击时不抓取网页上的焦点，而是在保持点击不变的情况下执行它们的功能。如何做到这一点？
如何使按钮不获取焦点？
34
- Mike Peat
1
我认为你可以更改接受的答案，选择得到最多赞的答案，这将对阅读此有用问题的人们非常有帮助。 - Hakan Fıstık
11个回答
54
取消默认的
onmousedown 行为可以防止元素获得焦点：// Prevent capturing focus by the button.
$('button').on('mousedown',
/** @param {!jQuery.Event} event */
function(event) {
event.preventDefault();
}
);
- real4x
6
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>
- Alsciende
2
1document.activeElement 是 HTML5 的一部分。只有 Firefox2 和 Safari 不支持它，尽管 Safari 的最新夜间版本据说支持它。 - Alsciende
由于您正在使用onmousedown，因此您可以只使用preventDefault而不必担心存储当前活动元素，因为它永远不会获得焦点。但是，您可能希望在500毫秒左右的时间内为按钮提供一些高亮显示，并在稍后使用计时器撤消以显示按钮已被单击。 - Evan Langlois
5
这对我通常很有效：
从https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex：
<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创建可访问的小部件。
- Lukas Bünger
5
最受欢迎的答案在技术上是正确的，但依赖于jQuery...
这里有一个更简单的例子:
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"></span>
- afloesch
1
问题要求多个按钮，而不仅仅是一个。 - Calos
4
我认为你想要做的事情并不容易，因为这是浏览器的默认行为。
当然，你可以在按钮被点击后立即模糊化它，但这只会取消所有选择。要让先前活动的对象重新获得焦点，您需要创建一种“记忆”方式，通过为每个元素添加一个模糊处理程序来跟踪哪个元素最近获得/失去焦点（将元素的ID存储在全局变量中，并在元素失去焦点时更新）。
当然，你可以在按钮被点击后立即模糊化它，但这只会取消所有选择。要让先前活动的对象重新获得焦点，您需要创建一种“记忆”方式，通过为每个元素添加一个模糊处理程序来跟踪哪个元素最近获得/失去焦点（将元素的ID存储在全局变量中，并在元素失去焦点时更新）。
- Alan Plum
3
我的解决方案是用
<div /> 替换 <button />，并将其样式设置为按钮。
看起来当你点击它时，Div 没有被聚焦。- jamland
1
由于工具栏按钮只是样式化的普通 HTML 按钮元素，因此这是实际的浏览器行为，您在更改它之前应该三思而后行。但尽管如此...
您应该能够通过从其 onclick 处理程序返回 false 来防止按钮获得焦点。
- Rene Saarsoo
3
谢谢 Rene我原以为这是正确的方法，但尝试后似乎没有效果。目前我实现了一个不好的解决方案，每个表单都设置默认值：{ onBlur: fieldExit }，其中fieldExit将调用对象放入lastField变量中，然后在按钮处理程序的末尾（它们都使用相同的处理程序）中执行lastField.focus()。这对文本字段有效，但奇怪的是对复选框无效（我还没有测试其他字段）。 - Mike Peat
你可以防止按钮保持焦点，但是如果不跟踪这样的元素，就无法将焦点返回到先前的元素。 - annakata
当点击事件被触发时，取消焦点已经太晚了。正如我上面所说，防止默认行为应该在onmousedown中完成。这不会阻止“onclick”，但它将防止焦点改变。至少在Webkit浏览器中是这样的。 - real4x
1
也许你可以尝试使用
stateful和状态改变属性来处理表单字段或其他内容，以便重新获得焦点？
- Thevs
1
我会给所有字段附加一个模糊事件监听器。此监听器应将失去焦点的字段保存在全局变量中。
然后，所有工具栏按钮都应该获得一个焦点事件监听器。此监听器应聚焦上述保存的字段。
这段代码应该可以工作，尽管我没有测试过它。
然后，所有工具栏按钮都应该获得一个焦点事件监听器。此监听器应聚焦上述保存的字段。
这段代码应该可以工作，尽管我没有测试过它。
- Jochen
1
<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>
我发现，你需要创建一个虚拟元素，在这种情况下，我发现按钮最有效。将按钮放在一个0像素的div中。
[不要将div设置为display none，一些浏览器会忽略它]
基本上，任何点击或按钮按下，都会聚焦于此虚拟按钮。 我有一个非常类似的项目，每当他们按下向下箭头，它就会选择页面上的第一个按钮，这只是一遍又一遍地聚焦于按钮。
有点混乱，但它有效。
- Dillon Burnett
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接