クリック可能なバックグラウンドdivを持つが、フォアグラウンドdivを除いて

Question

私はバックグラウンドをクリック可能なリンクにしなければならないページを持っていますが、フォアグラウンドは大丈夫です。

<div id="site_background_container" onclick="window.location.href='{{$background_link}}'" style="position:relative; z-index:-100; cursor:pointer;"> 

<div id="site_main_container" style="z-index:5;"> 

問題は今site_main_container div要素もクリック可能であるということです：私は、バックグラウンドクリッカブルをこのように得ることができました。クリック率をどのようにしてsite_background_containerに制限できますか？

ありがとうございます！

Answer 1

jQueryを使用します。 e.targetがこれと同じ要素の場合は、子孫をクリックしていません。

$('#site_background_container').on('click', function(e) { 
 
    if (e.target !== this) { 
 
    return; 
 
    } 
 
    alert('clicked the site_background_container'); 
 
});

#site_background_container { 
 
    background: #ff0; 
 
    padding: 20px; 
 
} 
 

 
#site_main_container { 
 
    background: red; 
 
    color: white; 
 
    padding: 10px; 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="site_background_container"> 
 
    <div id="site_main_container" style="z-index:5;"> 
 
    Site Main Container 
 
    </div> 
 
</div>

・ホープ、このことができます：

$('#site_background_container').on('click', function(e) { 
    if (e.target !== this) { 
    return; 
    } 
    alert('clicked the site_background_container'); 
}); 

は、以下のスニペットを見てください！