我有一个元素在不透明度的元素下:0.5我希望能够点击.如何点击"穿过"最顶层的元素？
这是一个演示我的问题的例子.单击框以打开和关闭它们.您可以在jsbin上编辑它以试用您的解决方案.
如果您可以在悬停时切换框,则可获得奖励积分.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; }
.box {width: 50px; height: 50px; border: 1px solid white}
.highlight {background-color: yellow;}
</style>
<script type="text/javascript">
var dthen = new Date();
$('<div id="past">').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px'
,'position': 'absolute'
,'width': '200px'
,'top': '0px'
,'background-color': 'grey'
,'opacity': '0.5'
})
.appendTo("#container");
setInterval(function(){
dNow = new Date();
$('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px');
},10)
$(".box").click(function(){ …我想点击按钮2来触发按钮1上的点击事件.
但是,当我尝试以下操作时,点击#2时没有任何反应:#1或#2没有警报.
HTML:
<div id="container">
<button id="button-1">Button 1</button>
<button id="button-2">Button 2</button>
</div>
JS:
$('#container').on( "click", '#button-1', function(e){
alert('CLICKED 1');
});
$('#container').on( "click", '#button-2', function(e){
$('#button-1').trigger(e);
alert('CLICKED 2');
});
而且,如果我在触发器之前发出#2警报,我最终会得到一个无限循环.
为什么这不按预期工作？
更新:
我应该说清楚:原始事件必须通过.从本质上讲,我们正在尝试做这里所做的事情,但是委托事件
我试图drag在与jQuery-UI的draggable小部件连接之后立即在div上触发事件.我有一些代码在被拖动时会消失,我还想在页面加载后立即运行此代码.我有时在其他jQuery处理程序上使用这样的习惯用法:
$('.foo').on('bar', function() {
console.debug('bar!');
}).trigger('bar');
这似乎不起作用draggable.这是我的代码:
var draggable = $('[draggable]').draggable({
drag: function(event, ui) {
//do some stuff
console.debug(event);
}
}).trigger('drag');
在drag当我将项目拖动处理程序被调用,而不是在页面加载.
可能相关的信息:
当我拖动项目时,控制台中显示的事件如下所示:
jQuery.Event {
type: "drag",
target: div#myElementId.ui-draggable,
currentTarget: document,
delegateTarget: document,
data: null,
//lots of other properties
}
我尝试了各种调整,但没有任何效果:
jQuery.Event构造函数并手动设置上述属性document.getElementByIdmousedown或mousedown.draggable代替drag(这是基于我发现的一些变通方法代码)
是的,我意识到我可以单独定义处理程序.我想要这样做的部分原因是可以访问ui参数,这使我可以轻松获得元素的位置和偏移量.我可以通过其他方式找到它们,但这很烦人.我也很好奇为什么这不起作用.
搜索谷歌和搜索引擎优化没有解决方案,只是与我无关的解决方法,以及有关同一问题的其他投诉.来自jQUI团队的JörnZaefferer建议使用jQuery.simulate插件作为解决方法,因此可能无法实现.奇怪的是,它们不会与其他jQuery事件保持一致.