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位于顶部，但是它不起作用。我尝试弄乱CSS中的display和position元素，但也没有运气。但是，我应该提及的是，我正在寻找一种不包含更改元素的position属性的解决方案。

无论我在onclick div区域中单击什么位置，如何都可以触发start-arrow？

编辑：Stack Overflow内部似乎工作得更好，为什么呢？但是，如果单击每行边框的顶部，则它并不总是有效。我正在Firefox中打开我的（完全相同的代码）（在asp.net中也无法使用）。

Answer 1

let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}

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>

这不是最优化的解决方案，但是应该可以解决问题，其他解决方案是通过添加填充来增加点击框。

let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}

Answer 2

为什么我们不简单地将元素包装到另一个父元素中并在其上绑定事件？我可以使用父元素（“ 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>

Answer 3

问题是您要附加点击事件监听器。这意味着，如果要触发它，则需要单击并释放该元素。 如果单击您的元素，它将移到左上角。现在，如果您足够慢，则该元素不再位于鼠标指针下方，因此不会触发click事件，因为您将鼠标释放至下方。 因此只需替换

onclick="startDownload()"

作者

onmousedown="startDownload()"

，并确保在回调函数中没有警报对话框，因为这将停止箭头的移动。只需使用console.log（“ fired”）;

Answer 4

使用jquery执行。使用ID 开始箭头

<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>

尝试一下：

$(document).on('click','#start-arrow',function(){
  alert('Hi');
});