javascript - div onclick 不触发(css 动画箭头，可能的 div 大小/覆盖问题)

Question

我正在使用带有以下代码的动画箭头:

function startDownload() {
    alert("Hi");
}

.arrow {
    cursor: pointer;
    height: 120px;
    position: relative;
    transition: transform 0.1s;
    width: 80px;
    /*display: inline-block;*/
}

.arrow-top, .arrow-bottom {
    background-color: #666;
    height: 4px;
    left: -5px;
    position: absolute;
    top: 50%;
    width: 100%;
}

    .arrow-top:after, .arrow-bottom:after {
        background-color: #fff;
        content: '';
        height: 100%;
        position: absolute;
        top: 0;
        transition: all 0.15s;
    }

.arrow-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
}

    .arrow-top:after {
        left: 100%;
        right: 0;
        transition-delay: 0s;
    }

.arrow-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
}

    .arrow-bottom:after {
        left: 0;
        right: 100%;
        transition-delay: 0.15s;
    }

.arrow:hover .arrow-top:after {
    left: 0;
    transition-delay: 0.15s;
}

.arrow:hover .arrow-bottom:after {
    right: 0;
    transition-delay: 0s;
}

.arrow:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
}

<style type="text/css">
    body {
        background-color: black;
        /*background-color: #2B2A3F;*/
    }
</style>

<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
    <div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
    <div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>

问题是当我点击两条箭头线时，onclick() 不起作用。仅当我单击两条线的周围区域时，它才有效，该区域被 id 为 start-arrow 的父 div 的边框包围。

所需的行为是让 onclick 在 start-arrow div 包围的整个区域中工作。

我尝试使用 z-index 使 start-arrow div 位于顶部，但它不起作用。我尝试弄乱 display 以及 CSS 中元素的 position 但也没有运气。不过我应该提一下，我正在寻找一种不包括更改元素的 position 属性的解决方案。

无论我在 start-arrow div 区域中的哪个位置单击，我怎样才能使 onclick 触发？

编辑:它在 Stack Overflow 中似乎工作得更好，为什么？但是，如果单击每行边框的顶部，它并不总是有效。我在 Firefox 中打开我的(完全相同的代码)(它在我的 asp.net 中也不起作用)。

Answer 1

为什么我们不简单地将元素包装到另一个父元素中并在其上绑定(bind)事件？我能够使用父元素('parent-id')解决它。

function startDownload() {
    alert("Hi");
}

.arrow {
    cursor: pointer;
    height: 120px;
    position: relative;
    transition: transform 0.1s;
    width: 80px;
    /*display: inline-block;*/
}

.arrow-top, .arrow-bottom {
    background-color: #666;
    height: 4px;
    left: -5px;
    position: absolute;
    top: 50%;
    width: 100%;
}

    .arrow-top:after, .arrow-bottom:after {
        background-color: #fff;
        content: '';
        height: 100%;
        position: absolute;
        top: 0;
        transition: all 0.15s;
    }

.arrow-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
}

    .arrow-top:after {
        left: 100%;
        right: 0;
        transition-delay: 0s;
    }

.arrow-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
}

    .arrow-bottom:after {
        left: 0;
        right: 100%;
        transition-delay: 0.15s;
    }

.arrow:hover .arrow-top:after {
    left: 0;
    transition-delay: 0.15s;
}

.arrow:hover .arrow-bottom:after {
    right: 0;
    transition-delay: 0s;
}

.arrow:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
}

<style type="text/css">
    body {
        background-color: black;
        /*background-color: #2B2A3F;*/
    }
</style>

<div id="parent-id" onclick="startDownload()">
  <div class="arrow" id="start-arrow"  style="z- 
   index: 10;">
      <div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
      <div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
   </div>
 </div>