<html>
<style>
div {
height: 40px;
margin: 40px 0;
background-color: red;
}
div.A {
background-color: green;
}
</style>
<c id=test>
<div class=A>s</div>
<br>
<div class=B>s</div>
<br>
<div class="A C">s</div>
</c>
<script>
//https://gist.github.com/2369850
if(!Element.prototype.matchesSelector) {
Element.prototype.matchesSelector =
Element.prototype.webkitMatchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector || function(selector) {
if(!selector)return false;
if(selector === "*")return true;
var thisObj = this,
parent,
i,
str,
tmp,
match = false;
if(/^[\w#\.][\w-]*$/.test(selector) || /^(\.[\w-]*)+$/.test(selector)) {
switch (selector.charAt(0)) {
case '#':
return thisObj.id === selector.slice(1);
break;
case '.':
match = true;
i = -1;
tmp = selector.slice(1).split(".");
str = " " + thisObj.className + " ";
while(tmp[++i] && match) {
match = !!~str.indexOf(" " + tmp[i] + " ");
}
return match;
break;
default:
return thisObj.tagName && thisObj.tagName.toUpperCase() === selector.toUpperCase();
}
}
parent = thisObj.parentNode;
if(parent && parent.querySelector) {
match = parent.querySelector(selector) === thisObj;
}
if(!match && (parent = thisObj.ownerDocument)) {
tmp = parent.querySelectorAll(selector);
for (i in tmp ) if(_hasOwnProperty(tmp, i)) {
match = tmp[i] === thisObj;
if(match)return true;
}
}
return match;
}
}
function delegate(e,f){return function(c,b,a){for(a=c.target;a&&!1!==b&&a!=this;a=a.parentElement)a.matchesSelector(e)&&(b=f.call(a,c));return b}}
test.addEventListener("click", delegate(".A", function(e){console.log(this)}))
</script>