如何解决交叉区域的点击无效事件？

Question

二级菜单与实际点击区域存在交叉区域

于是在二级菜单下添加了一个子元素div，监听二级菜单的子元素的点击事件，原交叉区域仍然点击无效。

HTML:

<div class="level1-group dragDocument">
    <a class="menu-level1">
        <div>
            <img src="resource/template/image/circle.png" >
        </div><span>23</span> </a>
</div>
<div class="level2-group">
    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">24</span>
        </div>
    </div>

    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">25</span>
        </div>
    </div>
    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">26</span>
        </div>
    </div>
</div>

CSS:

    .menu li .level1-group a {
        position: absolute;
        display: block;
        height: 200%;
        width: 200%;
        color: #fff;
        pointer-events: auto;
        text-align: center;
        text-decoration: none;
        font-size: 40px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        background-size: contain;
    }

    .menu li a span {
        display: block;
        font-size: 22px;
        text-transform: uppercase;
        position: absolute;
        top: 57px;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-family: microsoft yahei;
    }
    .menu-level2 {
        height: 0;
        width: 0;
        top: 50%;
        left: 50%;
        opacity: 0;
        position: absolute;
        transition: all 0.7s linear;
        z-index: 1;
        transform-origin: 100% 100%;
    }
    .menu-level2-bg {
        height: 63%;
        width: 63%;
        position: absolute;
        overflow: hidden;
        z-index: 15;
    }
    .menu-level2-bg img {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .menu-level2-bg span {
        top: 43px;
        left: 2px;
        font-size: 28px;
        position: absolute;
        transform: rotate(-45deg);
        color: #3f448cd1;
        width: 100%;
        text-align: center;
        height: 88px;
        line-height: 88px;
        font-family: microsoft yahei;
    }

Js:

 //二级菜单生成
$(document).on("click", ".menu-level1", function(e) {
    e.stopPropagation();
    var $this = $(this);
    if ($this.find('span').html() != '') {
        var level2Length = $(this).parents('li').find('.menu-level2').length;
        if (level2Length > 0) {                   
            var degree = parseInt($(this).parent().attr('degree')) - 15;
            var level2CurrentDegree = degree;
            $this.parents('li').find('.menu-level2').each(function(index, element) {
                $(element).css({
                    "transform": 'rotate(' + level2CurrentDegree + 'deg)'
                });
                level2CurrentDegree = level2CurrentDegree + 45;
            });
        }
    }
});
 //监听二级菜单子元素 以弹出三级菜单
$(document).on("click", ".menu-level2-bg", function(e) {
    e.stopPropagation();
    var $this = $(this);
    var thirdImageLength;
    var $level2 = $(this).parents('.menu-level2');
    var index = $level2.index();
    var $levels = $(this).parents('.level2-group').siblings('.level3-group').find('.menu-level3');
    if ($this.find('span').html() == '') {
        return false;
    }
    $this.parents('.menu').find(".menu-level3").removeClass('open-level3');
    thirdImageLength = $levels.eq(index).find('.eleContainer').length;
    if(thirdImageLength>3){
        $levels.eq(index).find('a').css('display','');
    }
    $levels.eq(index).addClass('open-level3');
});

然后调z-index大小，使子元素的高度大于父元素，也不能解决，请大神帮帮忙！！

Answer 1

用canvas写吧 不会有这种问题