點擊事件和設置焦點之間的衝突？

我試圖符合一個輔助功能請求，以便在打開時將焦點設置爲模式。在打開模式的鏈接的點擊事件中，我嘗試將焦點設置爲模式內的鏈接元素（整個頁面加載時存在的模式，它只是不可見;模式中的鏈接元素也有一個href值）。不過，我似乎無法修改重點。我可以在文檔keydown事件中做到這一點，這讓我認爲與點擊時存在一些衝突。是否有任何已知的衝突，將焦點置於剛纔被點擊的地方？有什麼解決方法嗎？點擊事件和設置焦點之間的衝突？

鏈接主頁上：

模態

<li id="country-selector" class="country-selector"> 
    <a alt="Country Selector" href="#"><img src="../assets/images/countries/nz.png" alt="New Zealand flag"> New Zealand</a 
</li>

鏈接（使用把手，不知道是否有關，但包括反正）：

<li class="cs-region {{#if @first}}active{{/if}}"> 
    <a href="#cs-{{slug}}" class="cs-tabs__link" {{#if @first}}id="cs-countries__first-focus" {{/if}}>{{region}}</a> 
</li>

所出爲：

<li class="cs-region active"> 
    <a href="#cs-europe" class="cs-tabs__link" id="cs-countries__first-focus">Europe</a> 
</li>

第一個鏈接爲

。

這裏是我的JS：

$('#country-selector').on('click', function(e) { 
    //Accessibility; make the modal keyboard navigable 
    var modalParent = document.getElementById('cs-countries'); 

    if ($.contains(modalParent, document.activeElement) !== true) { 
     //tabbed outside modal, so reset focus 
     console.log("activeElement is outside modal: ", document.activeElement); 
     document.getElementById('cs-countries__first-focus').focus(); //native js method 
     $('#cs-countries__first-focus').focus(); //jquery method 
     console.log("after set: ", document.activeElement); 
    } else { 
     console.log("activeElement is inside modal: ", document.activeElement); 
    } 
});

無論是jQuery的或本地JS方法的工作，雖然我在別處使用他們在項目中的類似問題，只是不能在點擊事件上。可以在通過主要頁面元素的其餘部分標籤後標籤到模式，並且我可以在標籤時設置焦點，但是我需要焦點從模態內的元素開始。

來源

2016-11-24 Katharine Osborne

A面的問題：你想幹什麼與第一，如果查詢achive？在我的眼中，'== false'和'！= true'的確如此。或者我錯了？ – reporter

我想這只是個人的習慣？我傾向於用真理來寫所有的東西。這是更少的心理體操，我犯的錯誤更少。 –

我能解決使用的setTimeout（並打破了午餐）這個問題：

$('#country-selector').on('click', function(e) { 
    //Accessibility; make the modal keyboard navigable 
    var modalParent = document.getElementById('cs-countries'); 

    if ($.contains(modalParent, document.activeElement) !== true) { 
     //tabbed outside modal, so reset focus 
     console.log("activeElement is outside modal: ", document.activeElement); 
     setTimeout(function() { 
       console.log("in set timeout"); 
       $('#cs-countries__first-focus').focus(); 
       console.log("afterset: ", document.activeElement); 
      }, 1); 
    } else { 
     console.log("activeElement is inside modal: ", document.activeElement); 
    } 
});

來源

2016-11-24 14:39:00

點擊事件和設置焦點之間的衝突？

回答

相關問題