通过透明元素处理 JS 事件
JS event handling through transparent elements
我有两个重叠的元素,一个在另一个之上。顶部元素的一半是完全透明的(不透明度 = 0),显示下面的另一个元素。我已经为这两个元素分配了单击事件处理程序,但显然,当尝试单击下面的元素时,它会激活透明的"top"元素。我正在寻找解决这个问题的方法。
我通常会在顶部元素的不透明部分创建一个幽灵元素来获取顶部元素的事件处理程序,但我正在使用倾斜的渐变,所以这不是一个真正的选择。
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);
});
非常感谢任何帮助:)
附言我知道很多代码远非漂亮,但我只是在这个阶段进行测试:)
只需捕获点击事件的 x,y 坐标,并检查不可见阻止程序下方的哪些元素适合相同的屏幕空间,然后在相应元素上触发点击事件。
话虽如此,这很愚蠢。如果你想让人们点击东西,你不应该把东西放在他们面前。
相关文章:
- 为什么js事件消失了
- 使用onkeyup JS事件检查输入的值是否唯一
- JS事件未更改输入禁用属性
- jQuery的等价物's$(this)在Ractive.js事件代理中
- Raphael JS事件未开火
- Ajax 请求正在取消页面上的其他 JS 事件
- 当多个 JS 事件调用同一个函数时,如何处理它们
- 主干.js事件处理程序命名的最佳做法
- js事件,用于函数内部的when语句变为true
- React.js事件需要点击2次才能执行
- 单击文档时的Backbone JS事件
- 在添加元素时激发JS事件
- 作为自动化测试的一部分,监控特定的js事件以及执行它们所需的时间
- JS事件CTRL+鼠标悬停+隐藏文本
- Backbone.js事件未启动
- JS调试器是否挂起整个JS事件循环
- js事件循环是否意味着可以为临时暂存空间使用全局变量
- 在Backbone.js视图中拖动gabilly.js事件
- 从本机 java 代码调用 JS 事件
- 主干网.js事件和内存管理