屏蔽iframe对事件的接收和响应,在一个界面中捕获mouseover、mousedown、mouseup事件。
<script type="text/javascript">
var splitUtil = {
x:0,
drag:false,
startFunc:function(e){
console.log("start");
splitUtil.drag = true;
//记录初始位置
splitUtil.x = e.clientX;
$(document).bind("mousemove", splitUtil.movingFunc).bind("mouseup",
splitUtil.endFunc);
$("#div1").show();
},
endFunc:function(e){
console.log("end");
if(splitUtil.drag && e.clientX != splitUtil.x){
var temp = e.clientX + 1 ;
$('#menu').width(temp);
$('#right').css('right','0px');
$('#right').css('top','0px');
$('#right').css('left',temp + 5 + 'px');
}
splitUtil.drag = false;
$(document).unbind("mousemove").unbind("mouseup");
$("#div1").hide();
},
movingFunc:function(e){
console.log("moving");
if (splitUtil.drag && e.clientX != splitUtil.x) {
var e = e || window.event;
var temp = e.clientX + 3;
$("#rightbar").css({"left":(temp)});
}
},
};
$(function() {
$("#rightbar").mousedown(splitUtil.startFunc);
});
</script>
<div id="div1" style="position:absolute; left:0; top:0; width: 100%; height: 100%; z-index: 10; background-color: white;"></div>
<div style="float: left; height:100%;" id="menu" class="content">
<iframe id="mainIframe1" scrolling="auto"
src="XXX"></iframe>
</div>
<div id="rightbar"
style="width: 3px; background: #cccccc; cursor: e-resize; height:100%; position: absolute; left:200px; z-index: 12;"></div>
<div id="right" style="height:100%; position: absolute; top:0; right: 0; left: 203px; background: white;">
<iframe id="mainIframe2"
src="WWW"></iframe>
</div>
#div1{
opacity:0;
filter:Alpha(opacity=0);
display: none;