在DOM節點上處理焦點和模糊事件

我有一個input type=text控制T，當專注運行一些JavaScript以顯示div UI元素E。在DOM節點上處理焦點和模糊事件

當T模糊不清時，E被onblur回調隱藏。

但是，當用戶點擊E,T當然是模糊的，但在這種情況下，我不想隱藏E。

如何區分onblurT回調之間的正常模糊和控件內某處的模糊？

我試過document.activeElement，但是這返回body元素，這對我沒用。

最小例如：

https://jsfiddle.net/1w8hr5jr/

編輯：

難道因爲只有某些類型的DOM節點都可以接收焦點，即focus和blur是我的需求不夠強大的情況下這裏？

來源

2016-06-30 Ben

你只使用JS純粹？ –

也許你不應該使用onblur，而是一個文件點擊事件來隱藏E，這樣你就可以測試點擊目標是否爲E或者E所包含的E –

贊同純JS，但是有JQuery – Ben

我的建議，因爲在我的評論說，就是用的，而不是模糊的click事件和重點

HTML

<div id="container"> 
    <input type="text" id="foo"></input> 
    <div id="bar"> 
    hello 
    </div> 
</div>

的JavaScript

var container = document.getElementById('container'); 
var foo = document.getElementById('foo'); 
var bar = document.getElementById('bar'); 

function onFocus() { 
    bar.style.display = 'block'; 
} 

function onClick(evt) { 
    if (evt.target === foo) { 
    bar.style.display = 'block'; 
    } else if (evt.target !== bar) { 
    bar.style.display = 'none'; 
    } 
} 

container.addEventListener('click', onClick);

https://jsfiddle.net/she5fqmh/2/

我最近有同樣的挑戰，這是我有最好的解決方法nd

來源

2016-06-30 15:56:19

在DOM節點上處理焦點和模糊事件

回答

相關問題