Fatal编程技术网
  • javascript/
  • Javascript 通过透明元素处理JS事件

Javascript 通过透明元素处理JS事件

javascript jquery css

Javascript 通过透明元素处理JS事件,javascript,jquery,css,Javascript,Jquery,Css,我有两个重叠的元素，一个在另一个之上。顶部元素的一半是完全透明的（不透明度=0），显示下面的另一个元素。我已经为这两个元素分配了click事件处理程序，但是很明显，当尝试单击下面的元素时，它激活了透明的“top”元素。我在想办法解决这个问题 我通常会在top元素的不透明部分创建一个ghost元素，以拾取top元素的事件处理程序，但我使用的是有角度的渐变，所以这不是一个真正的选项 CSS、HTML和jQuery的代码如下： HTML: JS: 非常感谢您的任何帮助：） 注：我知道很多代码都不漂亮，

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

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

CSS、HTML和jQuery的代码如下：

HTML:

JS:

非常感谢您的任何帮助：）

注：我知道很多代码都不漂亮，但我只是在这个阶段进行测试：）

只需捕获单击事件的x，y坐标，并检查不可见拦截器下的哪些元素适合相同的屏幕空间，然后在相应的元素上触发单击事件

尽管如此，这是愚蠢的。如果你想让人们点击东西，你不应该把东西放在他们面前

谢谢，我很感谢你的帮助，我会尝试一下的。我知道这看起来很傻，但我想不出任何其他方法来解决我试图解决的问题。 
<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>

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

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);  
});