长期潜伏在这里。这是我的第一篇文章(我是一名电气工程师,而不是程序员)。
我想要一个 HTML 元素,我可以检测到对其上半部分和下半部分的点击。具体来说,假设我有一个很大的数字,如果您单击其“腰部”上方,它会递增,如果您单击其腰部下方,它会递减。然后,我需要将其中几个并排放置,就像火车站的“分瓣显示器”一样。
我已经让所有的 javascript 只用于递增,但我想让递减变得更容易,而不是必须通过多次点击来完成所有操作。到目前为止,我一直避免使用 jquery,所以如果您能想到一种仅 HTML 的方法来做到这一点,我很乐意听到它。
我意识到我可能需要将两个较小的容器(一个上部容器和一个下部容器)包装到一个较大的容器中,但是如何让文本覆盖两个内部容器的高度?我可能想避免将字体切成两半并分别更新上部和下部。
谢谢, 保罗
最佳答案
这应该有效:
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
是您希望应用此效果的元素
关于javascript - HTML 元素被水平线分成两半(在其腰部),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19041720/