HTML元素被水平线分成两半（在它的腰部）

Posted 2023-03-16

【中文标题】HTML元素被水平线分成两半（在它的腰部）

【英文标题】：HTML Element Divided in Half by Horizontal Line (at its waist)

【发布时间】：2013-09-27 02:22:01

【问题描述】：

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

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

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

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

谢谢， 保罗

【问题讨论】：

您能发布您目前拥有的代码吗？如果可能的话，在 jsfiddle.net 上进行演示？

是的，请输入密码。但从概念上讲，这很容易......在 html 方面，您需要一个具有两个内部元素的元素，每个元素都使用一半的父元素。那么您所要做的就是将一个事件附加到上部元素以增加，并为下部元素附加一个事件以减少。

你想要什么代码？ javascript还是HTML？现在它实际上只是一个 0 ，当检测到点击时我将其更新为 1 。我的 javascript 类似于 Markasoftware 在下面放置的内容：只是一个点击监听器（对于触摸屏来说，是一个不同的监听器）。

【参考方案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 是您希望应用此效果的元素

【讨论】：

有效！非常感谢 Markasoftware！我试图给你一个赞成票，但我需要更多的声望点才能这样做。

@Paul 谢谢！如果答案回答了您的问题，您可以点击投票计数器下方的小复选标记。这“接受”问题，给你 2 声望，给我 15。

@YuriyGalanter 这个例子很好，但是反过来了。这是正确的版本：jsfiddle.net/FemZ7/1

@Markasoftware 是的，我在发布链接后看到了它，但决定不更改它，因为它证明了这个概念。干得好，我今天学到了新东西。

作为后续，我对此进行了一些更改，使其能够在各种移动设备上运行。我使用 (e.clientY || e.pageY) 而不仅仅是 e.clientY 来处理 safari-mobile。如果可用，我还会使用三个侦听器：touchstart、touchmove、touchend。 touchstart 为要发生的事情做准备， touchend 执行这​​些更改，而 touchmove 在 touchend 中停用执行。我还使用top if-clause in this link 让腰部在所有手机上更好地居中。