Javascript 单击 div 时防止触发焦点事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8735764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent firing focus event when clicking on div
提问by olanod
This question is similar to my previous question, Click action on Focused DIV, but this time the main topic is, How to prevent focus event from triggering when I click one of the divs. Last time I had one div with tabindex='-1' to make it focusable on click, now I have a list of divs with tabindex>0 so they can gain focus when tabbing as well.
这个问题类似于我之前的问题Click action on Focused DIV，但这次的主题是，当我单击其中一个 div 时，如何防止触发焦点事件。上次我有一个带有 tabindex='-1' 的 div 以使其在点击时可聚焦，现在我有一个 tabindex>0 的 div 列表，因此它们也可以在使用 Tab 键时获得焦点。
<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>
some styling:
一些造型：
div {
height: 20px;
width: 60%;
border: solid 1px blue;
text-align: center;
}
div:focus {
border: solid 2px red;
outline: none;
}
Now I'm using a flag(action) to fire an action(alert) when clicking the div for 2nd time, and with just one click if it's already focused,with TAB for example.
现在我在第二次单击 div 时使用标志（动作）来触发动作（警报），如果它已经聚焦，只需单击一下，例如使用 TAB。
var action = false;
$('div')
.click(function(e){
e.stopImmediatePropagation();
if(action){alert('action');}
action = true;})
.focus(function(){action = true;})
.blur(function(){action = false;});
The problem with the code above is focus event is being fired, which means stopImmediatePropagation doesn't work the way I expected.. The two click action works commenting the focus event line, but you still need to double click when div gains focus on TAB. Here is the example: http://jsfiddle.net/3MTQK/1/
上面代码的问题是焦点事件被触发，这意味着 stopImmediatePropagation 没有按我预期的方式工作.. 两次单击操作可以注释焦点事件行，但是当 div 获得对 TAB 的焦点时，您仍然需要双击. 这是示例：http: //jsfiddle.net/3MTQK/1/
回答by Selvakumar Arumugam
DEMOhere
演示在这里
I think you are missing some parts here,
我想你在这里遗漏了一些部分，
event.stopPropagation()is used to stop the event from bubbling. You can read about it here.event.stopImmediatePropagation()In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly callingevent.stopPropagation(). You can read about it hereIf you want to stop browser events, then you should use
event.preventDefault(). You can read about it hereclick = mousedown + mouseup-> The focus will be set on a HTML element when the mouse down is successful. So instead of bindingclickevent, you should use 'mousedown'. See my demo.You cannot use 1 action boolean value to determine which div is clicked and how many times it has been clicked. Check my Demo to see how you can handle that.
event.stopPropagation()用于阻止事件冒泡。你可以在这里阅读它。event.stopImmediatePropagation()除了阻止执行元素上的任何其他处理程序之外，此方法还通过隐式调用event.stopPropagation(). 你可以在这里阅读如果你想停止浏览器事件，那么你应该使用
event.preventDefault(). 你可以在这里阅读click = mousedown + mouseup-> 当鼠标按下成功时，焦点将被设置在一个 HTML 元素上。因此click，您应该使用'mousedown'，而不是绑定事件。看我的演示。您不能使用 1 action 布尔值来确定单击了哪个 div 以及单击了多少次。检查我的演示以了解如何处理。
回答by justDoIT
To simply prevent firing focus when clicking on div just use mousedown + event.preventDefault(). Use mousedown rather than click because, as @Selvakumar Arumugamexplained, focus fires when mousedown is succesfull and event.preventDefault() will stop browser events (including our focus).
要在单击 div 时简单地防止触发焦点，只需使用mousedown + event.preventDefault(). 使用 mousedown 而不是 click 因为，正如@Selvakumar Arumugam解释的那样，当 mousedown 成功时焦点会触发，并且 event.preventDefault() 将停止浏览器事件（包括我们的焦点）。
Here's a code example:
这是一个代码示例：
$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});
回答by Ken
For the moment the apparent answer would be to restrict your selector from simply 'div' to a system of toggled class names, thereby you could control on what element your focus event would fire. It is more tedious and requires a bit more exception coding, but would do the job.
目前，显而易见的答案是将您的选择器从简单的“div”限制为切换类名的系统，从而您可以控制焦点事件将触发的元素。它更乏味，需要更多的异常编码，但可以完成这项工作。
