单击 div 时防止触发焦点事件

Question

这个问题和我之前的问题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>

一些样式：

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

现在我在第二次单击 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;});

上面代码的问题是焦点事件被触发，这意味着 stopImmediatePropagation 没有按我预期的方式工作。两次单击操作可以注释焦点事件行，但是当 div 获得时您仍然需要双击专注于 TAB。 示例如下：http://jsfiddle.net/3MTQK/1/

Answer 1

DEMO在这里

我认为你在这里遗漏了一些部分，

1. event.stopPropagation() 用于阻止事件冒泡。你可以阅读它here。

2. event.stopImmediatePropagation() 除了阻止执行元素上的任何其他处理程序外，此方法还通过隐式调用 event.stopPropagation() 来停止冒泡。你可以阅读它here

3. 如果你想停止浏览器事件，那么你应该使用event.preventDefault()。你可以阅读它here

4. click = mousedown + mouseup -> 当鼠标按下成功时，焦点将设置在 HTML 元素上。因此，您应该使用“mousedown”，而不是绑定click 事件。看我的演示。

5. 您不能使用 1 个操作布尔值来确定单击了哪个 div 以及单击了多少次。检查我的演示，看看你如何处理它。

Answer 2

要简单地防止在单击 div 时触发焦点，只需使用 mousedown + event.preventDefault()。使用 mousedown 而不是单击，因为正如 @Selvakumar Arumugam 所解释的，当 mousedown 成功并且 event.preventDefault() 将停止浏览器事件（包括我们的焦点）时会触发焦点。

这是一个代码示例：

$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});

Answer 3

简单地说，

// ❌ Don't (focus already set on mouse down)
onClick={e => e.preventDefault()}

// ✔️ Do (prevent focus)
onMouseDown={e => e.preventDefault()} 

Answer 4

目前，显而易见的答案是将您的选择器从简单的“div”限制为切换类名称的系统，从而您可以控制焦点事件将触发的元素。它更乏味并且需要更多的异常编码，但可以完成这项工作。