Question

我有两个重叠的元素，一个在另一个之上。顶部元素的一半是完全透明的（不透明度= 0），显示下面的另一个元素。我已经为这两个元素分配了单击事件处理程序，但显然，当尝试单击下面的元素时，它会激活透明的“top”元素。我正在寻找解决方法。

我通常会在顶部元素的不透明部分创建一个ghost元素来拾取顶部元素的事件处理程序，但我正在使用有角度的渐变，所以这不是一个真正的选项。

下面的CSS，HTML和jQuery代码：

HTML：

<body>
    <div id="wrapper">
        <div id="window">
            <div id="blueRibbon" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT</p>
               </div>
            </div>
            <div id="blueRibbon2" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT2</p>
               </div>
            </div>
        </div>
    </div>
    <script src="/scripts/jQuery.js"></script>
    <script src="/scripts/ribbons.js"></script>
</body>

CSS：

body, html{
margin: 0;
padding: 0;
height: 100%;
}

#blueRibbon2{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1520px;
}

#blueRibbon{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1400px;
}

#window{
width: 1200px;
height: 800px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
position: relative;
}

#wrapper{
padding-top: 50px;
padding-bottom: 50px;
width: 1200px;
margin: 0 auto;
position: relative;
background: #EEE;
}

JS：

function moveRibbonLeft(){
$(this).unbind("click", moveRibbonLeft);
$(this).animate({left: -1400}, 200, function(){
    $(this).bind("click", moveRibbonRight);    
});
}

function moveRibbonRight(){
$(this).unbind("click", moveRibbonRight);
$(this).animate({left: 0}, 200, function(){
    $(this).bind("click", moveRibbonLeft);    
});
}

function moveRibbonLeft2(){
$(this).unbind("click", moveRibbonLeft2);
$(this).animate({left: -1520}, 200, function(){
    $(this).bind("click", moveRibbonRight2);    
});
}

function moveRibbonRight2(){
$(this).unbind("click", moveRibbonRight2);
$(this).animate({left: -120}, 200, function(){
    $(this).bind("click", moveRibbonLeft2);    
});
}

$(document).ready(function(){
$("#blueRibbon").bind("click", moveRibbonRight);
$("#blueRibbon2").bind("click", moveRibbonRight2);  
});

非常感谢任何帮助：）

P.S我知道很多代码都很不错，但我只是在这个阶段进行测试：）

Answer 1

只需捕捉click事件的x，y坐标，并检查隐形阻挡器下面的哪些元素适合同一屏幕空间，然后触发相应元素上的click事件。

话虽如此，这很愚蠢。如果你想让人们点击东西，你就不应该把东西放在他们面前。

通过透明元素处理JS事件

1 个答案: