检测 <li> 元素的边距空间中的点击答案

【问题标题】：Detecting clicks in margin space of <li> elements检测 <li> 元素的边距空间中的点击
【发布时间】：2013-06-26 10:21:37
【问题描述】：

有没有办法检测对元素 css 边距的点击？

我正在使用文本框中的标记系统，有点像this one。我想要做的是，当用户在两个标签之间点击时注册，并将光标定位。这个空间是由标签上的边距创建的 - 有没有办法可以检测到该区域中的点击？

否则空格只是 ul 元素的一部分，当然，我可以检测到点击，但不知道它在哪里（我可以吗？）所以不知道将光标放在哪里。我能想到的唯一解决方案是创建两个 3px 宽的空白跨度来代替边距，并在它们上注册点击......但显然这不是一个很好的解决方案。有没有更好的方法来做到这一点？

这是一个 jsfiddle：http://jsfiddle.net/78rhB/1/ 我正在检测的 CSS 位是：

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

【问题讨论】：

考虑提供一个 jsfiddle 或者至少发布相关代码...
您可以使用填充（在li 内）而不是边距
roasted - 已排序，尽管我不确定它对我链接到的演示的问题有多大帮助。 Fabrizio - li 被一个样式化的边框包围，所以除非我能以某种方式将我的边框设置为不是圆形然后是 li 的边缘，否则我认为这是不可能的。

标签： jquery css dom jquery-tokeninput

【解决方案1】：

使用标签包装输入，它应该在没有 jQuery 的情况下工作。 http://codepen.io/anon/pen/Aviwf 为演示增加边距和背景颜色

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

【讨论】：

谢谢。为延迟道歉，这花了一些严重的 css 来获得工作版本，因为我在输入中使用 li 元素，而不是输入元素本身。（还有一个杂散的输入浮动。）谢谢！

【解决方案2】：

您为父元素ul 绑定点击事件处理程序并寻找最近的点击点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;
}

此代码只是一个示例，需要调试

【讨论】：