Question

这里是长期潜伏者。这是我的第一篇文章（我是电气工程师，而不是程序员）。

我想在HTML中有一个元素，我可以检测到它的上半部分和下半部分的点击。具体来说，假设我有一个很大的数字，如果你点击其“腰部”上方，它会递增，如果你点击它的腰部以下，它会递减。然后我需要把它们中的几个放在一起，就像在火车站的“分瓣式显示器”一样。

我已经将所有的javascript工作为仅增量，但是我想让它更容易减少，而不是必须用很多点击来包装。到目前为止，我一直避免使用jquery，所以如果你能想到一个只用HTML的方法来做这个，我很乐意听到它。

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

谢谢，保罗

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是您希望在

上应用此效果的元素

HTML元素由水平线分成两半（在腰部）

1 个答案: