Check current node in contenteditable element

Event based check of current node in contenteditable element. Created for answer to this Stack Overflow question: http://stackoverflow.com/a/31517499/2502532

by Gerald Fullam

HTML

<ul contenteditable class="outerList">
      <li class="innerElement">Hello</li>
      <li class="innerElement"><i>Hello</i></li>
      <li class="innerElement"><b><i>Hello</i></b></li>
      <li class="innerElement"><b>Hello</b></li>
      <li class="innerElement">Hello</li>
      <li class="innerElement">Hello</li>
  </ul>

JavaScript

$(document).ready(function() {
    
    function getCurrentNode() {
        var node = window.getSelection().getRangeAt(0).commonAncestorContainer;
        return node.nodeType === 1 ? node : node.parentNode;     
    }
    $('.outerList').on('click keyup', function (e) {
        var $target  = $(getCurrentNode()),
            $closest = $target.closest('b');
        console.log(e.type);
        console.log('I am the outer ul');
        console.log($target);
        
        // Optional. Filter by clostest selector.
        if ($closest.length) {
            console.log('Target matches selector', $closest);
        }
    });
    $('.innerElement').on('click', function (e) {
        console.log(e.type);
        console.log('I am an inner element');
    });
});