css下层元素阻止了上层元素的点击事件,如何解决?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css下层元素阻止了上层元素的点击事件,如何解决?相关的知识,希望对你有一定的参考价值。

使用z-index:来给元素层定位置。\x0d\x0a\x0d\x0aCSS pointer-events\x0d\x0aPointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何html元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而“none”是一个有趣的属性。\x0d\x0a将它应用到一个元素\x0d\x0a如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素,就像这样:\x0d\x0a 参考技术A //jquery部分
// #div1  :   被挡上的HTML元素的ID
$(document).ready(function()
    $("#div1").click(function(event)
        event.stopPropagation();
    );

参考技术B 使用z-index:来给元素层定位置。

CSS pointer-events
Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而“none”是一个有趣的属性。
将它应用到一个元素
如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素,就像这样:
<style>
.overlay
pointer-events: none;

</style>
<div id="overlay" class="overlay"></div>
浏览器支持
到目前为止,Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我觉得Opera和IE肯定会尽快赶上,我不知道它们的计划中是否支持它。
参考技术C 把点击作为一个单独的浮动层置顶即可追问

具体怎么做呢?能给个例子?

参考技术D 设置z-index的值,将需要点击层z-index的值设置大一点追问

我设置了,就是有一个导航,我点击导航上的a元素,然后弹出一个div,结果这个div上的a元素的点击事件被下层div的a元素的点击事件给阻止了

jQuery实现鼠标点击Div区域外隐藏Div

 

冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(摘自网络)

 

1. 阻止事件冒泡, 并不阻止事件行为:event.stopPropagation();

$(function() {
	$("#link").click(function(event) {
		event.stopPropagation();
	});
});

2. 阻止事件行为,并阻止事件冒泡 :event.preventDefault();

$(function() {
	$("#link").click(function(event) {
		event.preventDefault(); 
	});
});

3. 阻止事件冒泡, 也阻止事件行为:return false;

$(function() {
	$("#link").click(function(event) {
		return false;
	});
})



阻止事件冒泡:
$("#btn").click(function (event) { 
	$("#demo").fadeIn(); 
	$(document).one("click", function () {//对document绑定一个影藏Div方法 
		$("#demo").hide(); 
	});
	event.stopPropagation();//点击Button阻止事件冒泡到document 
}); 
$("#demo").click(function (event) { 
	event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document 
}); 
 

例子:

 
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div>


$(".a").on("click", function(e){
    if($(".menu").is(":hidden")){
        $(".menu").show();
    }else{
        $(".menu").hide();
    }

    $(document).one("click", function(){
        $(".menu").hide();
    });

    e.stopPropagation();
});
$(".menu").on("click", function(e){
    e.stopPropagation();
});

以上是关于css下层元素阻止了上层元素的点击事件,如何解决?的主要内容,如果未能解决你的问题,请参考以下文章

前端css解决z-index 上层元素遮挡下层元素的方法

点透bug

冒泡事件 阻止冒泡事件

DOM事件处理有三个阶段

##阻止事件冒泡和取消默认操作

Android-从重叠view响应问题到安卓事件分发机制