爲什麼bootstrap下拉式調用window.onfocus

當我們點擊引導下拉鍊接時，自定義集合window.onfocus被調用。爲什麼bootstrap下拉式調用window.onfocus

爲什麼Bootstrap調用window.onfocus方法？

<ul class="nav navbar-nav navbar-right"> 
    <li data-ng-show="userName" class=""> 
    <a href="javascript://" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">name<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Logout</a></li> 
    </ul> 
    </li> 
</ul>

window.onfocus = function() { 
    alert("window onfocus called"); 
}

JSFiddle Link

當我們點擊菜單，就會顯示警告信息。

來源

2016-01-07 Bhuvan

爲什麼你認爲這是引導，而不僅僅是瀏覽器觸發onfocus，因爲你專注於網頁？ – epascarello

@epascarello不，你可以檢查它 –

是bootstrap調用onfocus，因爲當你點擊jsfiddle結果窗口中的空閒區域時，它會調用alert.click ok on alert box ..現在再次點擊空閒區域，沒有彈出窗口。 ..現在點擊下拉菜單，它彈出 – Bhuvan

因爲Bootstrap會在單擊的下拉錨點上觸發focus事件。這個事件自然會冒泡DOM樹，直到它到達窗口，並且你的功能被調用。

您可以防止這種情況，通過使用event.stopPropagation()：

jQuery(function($){ 
    $('.dropdown-toggle').focus(function(e){ 
     e.stopPropagation(); 
    }); 
});

JSFiddle

來源

2016-01-07 14:48:11 George

只是好奇爲什麼bootstrap需要在下拉菜單上觸發'focus'事件 – Bhuvan

@ user2410148這樣你和我就可以捕捉事件，如果我們需要的話。普通的'select'下拉菜單會觸發'focus'事件，Bootstrap所做的所有嘗試都儘可能地模仿這種行爲。 – George

Window.onfocus結合自身window對象，並得到所有焦點事件引發的，因爲它們堆滿了DOM樹。單擊下拉菜單時的焦點事件與點擊窗口時的焦點事件不同。您在查看this JSFiddle的控制檯時可以看到此信息。

window.onfocus = function(e) { 
    console.log(e); 
}

來源

2016-01-07 14:50:18 GAntoine

爲什麼bootstrap下拉式調用window.onfocus

回答

相關問題