0

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

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

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

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

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

2 回答 2

2

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

input {margin:0 3em;}
label {display:inline-block;background:rgba(0,0,0,0.1)}
于 2013-06-26T11:26:23.597 回答
0

您为父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;
}

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

于 2013-06-26T10:43:25.653 回答