这个问题类似于我之前的问题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'。看我的演示。
  • 您不能使用1操作 bool 值来确定单击哪个div以及单击多少次。查看我的演示,看看如何处理。
  • 关于javascript - 单击div时防止触发焦点事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8735764/

    10-12 12:51
    查看更多