javascript - HTML 元素被水平线一分为二(在腰部)

Question

长期潜伏在这里。这是我的第一篇文章(我是电气工程师，不是程序员)。

我想要一个 HTML 元素，我可以检测到对其上半部分和下半部分的点击。具体来说，假设我有一个大数字，如果你点击它的“腰部”上方它会增加，如果你点击它的腰部下方它会减少。然后，我需要将其中的几个并排放置，就像火车站的“分离式翻盖展示”。

我已经拥有所有仅用于递增的 javascript，但我想让它更容易递减，而不是必须通过多次点击一直循环。到目前为止，我一直避免使用 jquery，所以如果您能想到一种仅使用 HTML 的方法来执行此操作，我很乐意听到。

我意识到我可能需要将两个较小的容器(一个上层容器和一个下层容器)包裹到一个较大的容器中，但是如何让文本覆盖两个内部容器的高度？我可能想避免将字体切成两半并分别更新 upper 和 lower。

谢谢，保罗

Answer 1

这应该有效:

element.addEventListener('click',function(e){
    //here's the bounding rect
    var bound=element.getBoundingClientRect();
    var height=bound.height;
    var mid=bound.bottom-(height/2);
    //if we're above the middle increment, below decrement
    if(e.clientY<mid)
        ;//we're above the middle, so put some code here that increments
    else
        ;//we're below the middle, so put some code here that decrements
},false);

element 是您希望对其应用此效果的元素