Check if clicked element has specific tagname I'm trying to determine whether an element which has been clicked has a specific tagname. The trick is, that sometimes when you click an element you want any parent to be that specific tag.

My approach:

var ignore = 'a input textarea body'.split(' ');

var isClickable = function(elem) {
    var cancel = false;

    for (i in ignore) {
        if (elem.nodeName.toLowerCase() !== ignore[i]) {
            if (elem.parentNode.nodeName.toLowerCase() !== 'body')
                isClickable(elem.parentNode);
        }
        else {
            cancel = true;
            return cancel;
        }
    }

    return cancel;

};


document.onclick = function(evt) {
    isClickable(evt.target);
}


Is that code right or did I forget something?

SOLUTION: I came up to that tiny script based on Guffas solution (thanks!)
I've optimized the code to a shorter and faster version:

var isClickable = function(elem) {
    for (i in ignore)
        if (elem.nodeName.toLowerCase() === ignore[i])
            return true;
    return (elem.parentNode.nodeName.toLowerCase() !== 'body') &amp;&amp; isClickable(elem.parentNode);
};
I see two big problems with the code:


You are doing the recursive call inside the loop, so you will do each level four times. That will quickly escalade to a lot of calls. You should do the call after the loop, where you have determined that the node is not one in the array.
You are ignoring the result of the recursive call.


So:

function isClickable(elem) {
  for (i in ignore) {
    if (elem.nodeName.toLowerCase() === ignore[i]) {
      return true;
    }
  }
  if (elem.parentNode.nodeName.toLowerCase() !== 'body') {
    return isClickable(elem.parentNode);
  }
  return false;
};