Javascript jQuery-触发器在后面的元素上均匀单击

我的问题是，我有这个盒子又名容器。在该容器中，有用户可以单击的框

为了直观地帮助用户，我制作了灰色淡出颜色的覆盖框 这告诉他们可以使用这里的盒子

但我的问题是，单击事件位于覆盖框后面的框上

那么有没有办法忽略元素的

。单击（）

并使用下一个目标

您可以使用CSS属性：

CSS属性

指针事件

允许作者控制特定图形元素在什么情况下（如果有）可以成为鼠标事件的目标

或者您可以

触发
单击
事件：

$('#box').click(function(){
   $('#target').trigger('click')
})

避免CSS
指针事件

首先，确保包含的所有框都具有类名
box
（或类似名称）

其次，使用
.addClass（'inactive'）
使框处于非活动状态（在样式表中使用相应的CSS指令来查看背景色和边框）。要重新激活框，只需
.removeClass（'inactive'）

第三，将点击框的处理委托给容器，如下所示：

$('#container').on('click', '.box', function() {
    //common behaviour (pre)
    if($(this).hasClass("inactive")) {
        //inactive box behaviour
    }
    else {
        //active box behaviour
    }
    //common behaviour (post)
});

您可以使用由开发的立即调用函数表达式（IIFE），该表达式将检测鼠标指针的位置（x，y），并在您选择的元素上计算为true或false（如果事实上鼠标位于该元素上）

通过使用Ivan的代码，我能够生成这个概念证明，它将产生与
指针事件相同的结果：无但在不同浏览器之间更兼容。它使用jQuery
.offset（）
方法。在JSFIDLE中，有一个包含3个元素的页面，两个
，一个
，以50%的不透明度覆盖在按钮顶部。在正常情况下，如果不调整z索引，您将无法单击这些元素



//CSS Hitbox解决方案08-26-2015
//堆垛溢出-https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//检测鼠标悬停https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//资料来源：https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
（函数（$）{
$.mlp={
x:0,，
y:0
}；//鼠标最后位置
函数documentHandler（）{
var$current=this==document？$（this）：$（this.contents（）；
$current.mousemove（函数（e）{
jQuery.mlp={
x:e.pageX，
y:e.pageY
};
});
$current.find（“iframe”）.load（documentHandler）；
}
$（documentHandler）；
$.fn.ismouseover=函数（此函数）{
var结果=假；
此.eq（0）.each（函数（）中）{
var$current=$（this）.is（“iframe”）？$（this.contents（）.find（“body”）：$（this）；
var offset=$current.offset（）；
结果=offset.left$.mlp.x和offset.top$.mlp.y；
});
返回结果；
};
})（jQuery）；
$（'.notification box'）。打开（“单击”，函数（）{
$（“按钮”）。每个（功能（i）{
var iteratedButton=$（'button:eq（'+i+'））；
var buttonID=iteratedButton.attr（“id”）；
if（iteratedButton.ismouseover（））{
iteratedButton.toggleClass（buttonID）；
}
});
});
。通知框{
位置：绝对位置；
高度：100vw；
宽度：100vw；
背景色：黑色；
不透明度：0.5；
/*指针事件：无*/
z指数：-10；
溢出：可见；
}
钮扣{
位置：绝对位置；
顶部：绝对值；
宽度：50px；
z指数：-10；
}
按钮#否{
边缘顶部：25px；
}
.是的{
颜色：红色；
字体大小：粗体；
}
不{
颜色：蓝色；
字体大小：粗体；
}

对
不
你不能只使用选择器来定位小框吗？当你可以给实际框指定一个“禁用”类来将其样式设置为禁用元素时，我不理解覆盖框的必要性。这样你的点击功能就不会受到阻碍。小心！我想您会发现，IE中不支持
指针事件
——例如这里。@Beetroot Beetroot是的，ie8不支持
指针事件
属性。第二篇文章指出，
指针事件
目前对于所有非SVG元素都是不可靠的，即使在moz浏览器中也是如此。一、 首先，除了SVG工作之外，我看不到自己会很快使用它。我遇到的问题是，我正在使用JavaScript的fullcalendar插件（jQuery）。所以我做了一个定制，甚至可以使长方体的宽度为100%，而不是长方体原始宽度的较小百分比。即使我一直在寻找一种方法，将单击事件从我的box元素重定向到它后面的元素，以便在我什么也没发现时触发单击。所以现在我想指针事件是我唯一的选择，直到我幸运地在fullcalendar源代码中找到我需要的部分。但无论如何还是要感谢：）@danniehansenweb，您似乎在描述“事件冒泡”，这正是形式为
$（“#container”）的jQuery语句所利用的，如上所述。我相信这一点，或者类似的东西，是前进的方向，但是如果不看你的HTML，就不能给出更多建议。你能详细说明一下为什么应该避免
指针事件
？对它的支持似乎相当稳固。
$('#container').on('click', '.box', function() {
    //common behaviour (pre)
    if($(this).hasClass("inactive")) {
        //inactive box behaviour
    }
    else {
        //active box behaviour
    }
    //common behaviour (post)
});