使用指针事件点击重叠的div并隐藏div

Question

我做了这段代码，以便一旦点击“内部div”，点击“pointer-events：none;”就可以转到“outer div”。在CSS中。

$("#outer").click(function(){ 
 
alert("outer clicked") 
 

 
}); 
 

 
$("#inner").click(function(e){ 
 
    alert("inner clicked") 
 
    this.style.display = 'none'; 
 
    e.stopPropagation(); 
 
});

#outer { 
 
    width:300px; 
 
    height:200px; 
 
    border:3px solid; 
 
    margin:auto; 
 
    background: green; 
 

 
} 
 
#inner { 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 120px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    border:3px solid; 
 
    margin:auto; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="inner">inner div</div> 
 
    Outer div 
 
</div>

OK，功能完善。但是如果你点击外部div内的任何地方，我需要内部div来隐藏。我尝试使用this.style.display = 'none';，但它不起作用。

Answer 1

您只需要一个事件侦听器#outer，当点击#outer时隐藏内部div。

$('#outer').click(function (e) { 
 
    $('#inner').hide(); 
 
});

#outer { 
 
    width:300px; 
 
    height:200px; 
 
    border:3px solid; 
 
    margin:auto; 
 
    background: green; 
 

 
} 
 
#inner { 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 120px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    border:3px solid; 
 
    margin:auto; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="inner">inner div</div> 
 
    Outer div 
 
</div>

Answer 2

$("#outer").click(function(){ 
 
alert("outer clicked") 
 

 
}); 
 

 
$("#inner").click(function(e){ 
 
    alert("inner clicked") 
 
    this.style.display = 'none'; 
 
    e.stopPropagation(); 
 
});

#outer { 
 
width:300px; 
 
height:200px; 
 
border:3px solid; 
 
margin:auto; 
 
background: green; 
 
position:relative; 
 

 
} 
 
#inner { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 120px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    border:3px solid; 
 
    margin:auto; 
 
    z-index:10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="inner">inner div</div> 
 
    Outer div 
 
</div>

在您的例子，使用pointer-events是允许的点击或点击行为，以“穿越”的元素到另一个元素。