javascript 点击div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18642247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click through div
提问by Dove
When on notification hover, i want it to make opacity to semi transparent and being able to click through it like in this notification plugin Pines Notify
在通知悬停时，我希望它使不透明度变为半透明，并且能够像在此通知插件 Pines Notify 中那样点击它
I tried using pointer-events:none, but then it disables DOM element, so jQuery isn't working on this element. I need jQuery to execute code when on hover and on hover out. How can it be done ?
我尝试使用pointer-events:none，但随后它禁用了 DOM 元素，因此 jQuery 无法处理此元素。我需要 jQuery 在悬停和悬停时执行代码。怎么做到呢 ？
回答by Sam Battat
To be able to click through a div use the following
为了能够点击 div 使用以下
- Hide the overlay div
- trigger a click on the covered element
- show the div again
- 隐藏叠加div
- 触发对被覆盖元素的点击
- 再次显示 div
$('#front-div').click(function (e) {
$(this).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$(this).show();
});
$(".tobeclicked").click(function(){
$("#result").append("clicked<br />");
});
回答by thgaskell
Using a combination of applying the :hoverselector to the parent div and the pointer-events: nonedirective on the child div.
使用将:hover选择器应用于父 div 和pointer-events: none子 div 上的指令的组合。
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
HTML
HTML
<div class="container">
<div class="clickthrough">Mouseover</div>
<button onClick="alert('click!');">Click me</button>
</div>
CSS
CSS
.container {
position: relative;
}
.clickthrough {
position: absolute;
}
.container:hover .clickthrough {
opacity: 0.25;
pointer-events: none;
}
回答by Hubro
Here's how:
就是这样：
$(".above").click(function(e) {
// Hide the element so we can reach the element below.
$(this).hide(0);
// Fetch the underlying element.
var below = $(document.elementFromPoint(e.clientX, e.clientY));
// Trigger a click on the underlying element at the earliest convenience.
setTimeout(function() {
below.trigger("click");
});
// Display the element again.
$(this).show(0);
});
$(".below").click(function() { alert("Below clicked!"); });
The setTimeoutblock makes the topmost element reappear before the click event on the underlying element.
该setTimeout块使最上面的元素重新出现在底层元素上的单击事件之前。
Demonstration: http://jsfiddle.net/t86aV/
回答by gwer
What if to use inner DIV with high z-index? For example:
如果使用具有高 z-index 的内部 DIV 会怎样？例如：
<style>
.sub {
position: relative;
background: #99f;
width: 100px;
height: 100px;
}
.top {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
.opacityLayer {
position: absolute;
background: #fff;
width: 100px;
height: 100px;
opacity: 0.5;
left: 30px;
top: 30px;
}
</style>
<a href="#"><div class="sub"><div class="top"></div></div></a>
<div class="opacityLayer"></div>
