Javascript Jquery - Dont close if child element is clicked

Question

Ok i have a script that closes all my divs unless those divs have this class name. The following script works fine:

window.onclick = function(ev){
    if((ev.target.className !== 'ddHeader') && (ev.target.className !== 'ddSubmenu')&& 
    (ev.target.className !== 'ddContainer')&& (ev.target.className !== 'ddItem')){
        delay_close_sub();
    }
};

So now i need to do the same thing with a child element. I would like to just add it to the above code similar to this:

window.onclick = function(ev){
    if((ev.target.className !== 'ddHeader') && (ev.target.className !== 'ddSubmenu')&& 
    (ev.target.className !== 'ddContainer')&& (ev.target.className !== 'ddItem') && 
    ev.target.element !== 'ddHeader > input){
        delay_close_sub();
    }
};

I added: ev.target.element !== 'ddHeader > input') to the end but it does not work. How would i make this work? I want to make sure that when the input field inside the ddHeader div is click it doesn't trigger the "delay_close_sub() function.

Thanks for any help.

Answer 1

You can use JQuery in a much more efficient compact way:

$(window).click(function(ev){
    if(!$(ev.target).is('.ddHeader,.ddSubmenu,.ddContainer,.ddItem,.ddHeader > input'))
        delay_close_sub();
});

Which means if the event target doesn't match any of the comma-separated selectors, close your thing.

Answer 2

Use getElementsByTagName:

ev.target.element.getElementsByTagName('input').length == 0