Detecting clicks in margin space of <li> elements

Question

Is there a way to detect clicks on the css margin of an element?

I'm working with a tagging system in a textbox a bit like this one. What I want to be able to do, is register when a user clicks between two tags, and position the cursor as such. This space is created by a margin on the tags - is there a way I can detect a click in that zone?

The space is otherwise just part of the ul element, where of course, I could detect a click, but couldn't tell where it was (could I?) so wouldn't know where to position the cursor. The only solution I can think of is to create two 3px wide empty span's to use in place of the margins, and register clicks on them instead...but obviously that's not such a neat solution. Is there a better way to do this?

Here is a jsfiddle: http://jsfiddle.net/78rhB/1/ The bit of CSS I'm looking at detecting is:

    li.token-input-token-facebook {
        margin: 3px;
}

Answer 1

using label wrapping inputs , it should work without jQuery. http://codepen.io/anon/pen/Aviwf increased margin and bg color for demo

input {margin:0 3em;}
label {display:inline-block;background:rgba(0,0,0,0.1)}

Answer 2

You cat bind click event handler for parent ul element and look for closest for click point li

$('ul.required').on('click', function(e){

   var y = e.pageY;

   var closestLiElem = findClosest('ul.required li', y); /// this is li you need

});

var findClosest = function(selector, y) {
    var closest, closestY;

    $(selector).each(function() {    
       var elem = $(this);
       // here find minimal distanse of  y to bounds of element
       var centerY =  parseInt(elem.offset().top) + parseInt(elem.height()) / 2;
       var localY = Math.abs(centerY - y);
       if(closestY==null || (localY  < closestY)) {
            closestY = localY;
            closest = elem;
       }
    });

    return closest;
}

This code just a sample and required debug