html 重叠 点击,javascript – 重叠DIV元素和onclick

早在2013年,您必须使用脚本来解决此问题,但现在,指针事件是

widely supported.使用它！

通常,您只需使用pointer-events css属性.你猜怎么着？ IE不支持它…在我们的朋友jquery的帮助下,我们可以效仿它！

我的方法是捕获发光中的click事件(绝对定位的div)并检查是否有任何其他元素与鼠标单击的x-y坐标重叠.

警告：jQuery领先！

首先捕获click事件：

$('.glow').on('click', function(e) { // our trick here });

然后确定鼠标光标的坐标.非常简单,因为jQuery通过在事件对象中提供坐标来帮助我们

var cursorX = e.pageX;

var cursorY = e.pageY;

现在我们需要遍历所有可能位于我们想要接收click事件的glow div下面的dom元素.

$('.class-possibly-below').each(function(index, element) { // our calculations here });

如果我们可以获得相对于窗口的位置以及它的宽度和高度,我们可以在点击时计算光标是否在它上面.在这种情况下,我们的cursorX和cursorY值将位于我们正在遍历的DOM元素的左侧位置和左侧位置宽度(以及分别为顶部和高度)之间. jQuery再次帮助了一下：

var offset = $(element).offset();

xRangeMin = offset.left;

xRangeMax = offset.left + $(element).outerWidth();

我们使用offset()而不是position(),因为后者返回相对于它的父级的位置.我们分别使用outerWidth()和outerHeight()而不是width()和height(),因为前者还包括填充和边框.

现在检查x和y坐标是否在range-min和range-max之间.如果是,则触发此元素上的click事件.

if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {

$(element).trigger('click');

}

你想要一些行动吗？查看this fiddle！