单击div时防止触发焦点事件 [英] Prevent firing focus event when clicking on div
问题描述
这个问题类似于我之前的问题，点击Focused DIV上的操作，
但这次是主要话题是，当我单击其中一个div时，如何防止焦点事件触发。
上次我有一个带有tabindex =' - 1'的div以使其可以专注于点击，现在我有一个tabindex> 0的div列表，这样他们也可以在标签时获得焦点。
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.
<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>
一些造型：
div {
height: 20px;
width: 60%;
border: solid 1px blue;
text-align: center;
}
div:focus {
border: solid 2px red;
outline: none;
}
现在我正在使用一个标志（动作）来触发一个动作（警报） ）当第二次单击div时，如果它已经聚焦，只需点击一下，例如TAB。
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.
var action = false;
$('div')
.click(function(e){
e.stopImmediatePropagation();
if(action){alert('action');}
action = true;})
.focus(function(){action = true;})
.blur(function(){action = false;});
上面代码的问题是焦点事件被触发，这意味着stopImmediatePropagation不起作用我预期的方式..两个点击动作可以对焦点事件行进行注释，但是当div获得焦点在TAB上时，你仍然需要双击。
以下是示例： http://jsfiddle.net/3MTQK/1/ / p>
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/
推荐答案
DEMO 这里
DEMO here
我想你在这里遗漏了一些零件，
I think you are missing some parts here,
-
event.stopPropagation（）用于阻止事件冒泡。您可以在此处阅读相关内容。
event.stopPropagation()is used to stop the event from bubbling. You can read about it here.
event.stopImmediatePropagation（）除了保持元素上的任何其他处理程序不被执行外，此方法还通过隐式调用 event.stopPropagation来停止冒泡。 （）。你可以阅读这里
event.stopImmediatePropagation() In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation(). You can read about it here
如果如果要停止浏览器事件，则应使用 event.preventDefault（）。你可以在这里了解它
If you want to stop browser events, then you should use event.preventDefault(). You can read about it here
click = mousedown + mouseup - >当鼠标按下成功时，焦点将设置在HTML元素上。因此，不应绑定单击事件，而应使用'mousedown'。请参阅我的演示。
click = mousedown + mouseup -> The focus will be set on a HTML element when the mouse down is successful. So instead of binding click event, you should use 'mousedown'. See my demo.
您无法使用1个动作布尔值来确定单击了哪个div以及单击了多少次。检查我的演示，看看你如何处理它。
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.
这篇关于单击div时防止触发焦点事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
