Javascript Jquery单击事件仅在页面到达顶部位置时工作

我有CSS选项卡：

.tabs {
    width: 100%;
    height: 100%;
    margin: 0 0 30px;
}
.tabs label {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
    line-height: 25px;
    z-index: 1;
}

.tabs label:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}

.tabs input {
    position: absolute;
    left: -9999px;
}

#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2 {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
    z-index: 3
}

.tabs_cont {
    position: relative;
    height: 552px;
    border: 1px solid #DDD;
    border-width: 1px;
    background: #EFEFEF;
    padding: 0 12px;
    z-index: 2; 
}

.tabs_cont > div {
    position: absolute;
    left: -9999px;
    top: 0;
    opacity: 0;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2 {
    position: static;
    left: 0;
    opacity: 1;
}

和html：

<section class="tabs">
    <input id="tab_1" type="radio" name="tab" checked="checked" />
    <input id="tab_2" type="radio" name="tab" />

    <label for="tab_1" id="tab_l1">Изображения</label>
    <label for="tab_2" id="tab_l2">Текст</label>
    <div style="clear:both"></div>

    <div class="tabs_cont">
        <div id="tab_c1"> </div>
        <div id="tab_c2">
            <div class="add_element" id="add_text">добавить текст </div>
            <div id="text_inputs_wrapper"> </div>
        </div>
    </div>
</section>

当页面位于上方位置时，事件正在运行。如果我正在使用滚动和页面移动-事件未运行。 所有浏览器都会出现此问题。 有人遇到过这个问题吗？请帮忙

更新。 请看图片

在这种情况下，事件正在运行

在这种情况下，事件未运行

---

正如Vector所说，您只能单击#add#u text div来触发事件。#add_text div仅具有一行的高度，因此您必须右键单击文本

---

在选项卡c2和“添加”文本中添加高度：100%，然后您可以单击第二个选项卡页面上的任意位置来触发事件。

将此代码附加到css中，您的div“添加”文本将填充整个容器区域，单击在所有位置都有效

#add_text {
    background-color: red; //remove this later
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

---

当你在这个分区内点击zбббббббббббббб107。无论滚动位置如何。显然，div需要在视线范围内才能点击它演示我解释了我的问题图片。请注意，不可能像这样诊断问题。在chrome中尝试以下操作：右键单击元素，单击inspect元素，并确保在inspector中选择了

div#add_text

。如果选择了其他元素，则表示其他元素正在覆盖div，可能是z-index或溢出问题。此行为的原因是library Fabric.js。当您删除此库时，事件开始正常工作。我解释了我的问题图片。请坐look@sanyasobolev我理解你的问题和哪里出了问题，但你没有解释或理解的是，你添加点击事件的div的高度只有15px左右。所以当你向下滚动页面时，div是不可点击的。您是否添加了我建议的用于扩展div大小的代码？这种行为的原因是library Fabric.js。删除此库后，事件开始正常工作。

#add_text {
    background-color: red; //remove this later
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}