單擊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

目前明顯的答案是將您的選擇器從簡單的“div”限制為切換類名稱系統，從而可以控制焦點事件將觸發的元素。 它更繁瑣，需要更多的異常編碼，但可以完成這項工作。