JavaScript + addEventListener 'click' ignored on select html object

Question

I've added an eventListener on the document in hopes to hide myWidget whenever anything within the document is clicked (except for the widget of course).

myWidget.addEventListener('click', function (e) {
    e.stopPropagation(); 
}, false);

document.addEventListener('click', function (e) {
    myWidget.style.display = 'none';
    console.log(e.target);
});

Now this seems to work on everything but select html objects. Selecting a select box shows the select content, but the widget is not hidden and the console.log never fires. Any reason why?

Answer 1

I think you want the change event

document.addEventListener('change', function (e) {
    myWidget.style.display = 'none';
    console.log(e.target);
});