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

Question

这个问题类似于我之前的问题,点击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()用于阻止事件冒泡.你可以在这里阅读它.

2. event.stopImmediatePropagation()除了保持元素上的任何其他处理程序不被执行之外,此方法还通过隐式调用来停止冒泡event.stopPropagation().你可以在这里阅读它

3. 如果要停止浏览器事件,则应使用event.preventDefault().你可以在这里阅读它

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

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

简单地，

\n

// \xe2\x9d\x8c Don\'t (focus already set on mouse down)\nonClick={e => e.preventDefault()}\n

\n

// \xe2\x9c\x94\xef\xb8\x8f Do (prevent focus)\nonMouseDown={e => e.preventDefault()} \n

\n