这个问题类似于我之前的问题Click action on Focused DIV,
但是这次的主要主题是,当我单击一个div时如何防止焦点事件触发。
上一次我有一个带tabindex ='-1'的div使其可专注于单击,现在我有了一个tabindex> 0的div列表,因此它们也可以在制表时获得焦点。
<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时,我正在使用标志( Action )来触发一个 Action (警报),例如,如果它已经聚焦,只需单击一下即可,例如TAB。
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/
最佳答案
DEMO 在这里
我想您在这里缺少一些地方,
event.stopPropagation()
用于阻止事件冒泡。您可以阅读有关here的信息。 event.stopImmediatePropagation()
除了不执行元素上的任何其他处理程序外,此方法还通过隐式调用event.stopPropagation()
来阻止冒泡。您可以阅读有关的信息here event.preventDefault()
。您可以阅读有关的信息here click = mousedown + mouseup
->当鼠标按下成功时,焦点将设置在HTML元素上。因此,而不是绑定(bind)click
事件,您应该使用'mousedown'。看我的演示。 关于javascript - 单击div时防止触发焦点事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8735764/