Transitionend triggered on child transitionend

Question

I'm running a transitionend on a parent div because I want to wait until that transition is complete. Unfortunately, there is a child button that has a transition that trigggers the transitionend event to run before the parent div has finished its transition. I've tried using event.stopPropagation() but no luck.

The transitionend is only firing once instead of firing on all the transitions, so I can't filter by the event.target.

<div class="section">
   <div class="fp-tableCell">
       <a href="http://www.gosomewhere.com" class="btn">View</a>
   </div>
</div>


function whichTransitionEvent(){
    var t,
        el = document.createElement("fakeelement");

     var transitions = {
         "transition"      : "transitionend",
         "OTransition"     : "oTransitionEnd",
         "MozTransition"   : "transitionend",
         "WebkitTransition": "webkitTransitionEnd"
     };

     for (t in transitions){
         if (el.style[t] !== undefined){
             return transitions[t];
         }
    }
}

var transitionEvent = whichTransitionEvent();
var fpSection = $('.section.active').children('.fp-tableCell');

fpSection.one(transitionEvent, function (event) {
     console.log('do stuff');
});

Any help would be awesome. Thanks