Cesium.js点击事件
创建viewer
var viewer = new Cesium.Viewer('cesiumContainer');
鼠标事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//1、左键单击事件
handler.setInputAction(function(click){
console.log('左键单击事件：',click.position);
},Cesium.ScreenSpaceEventType.LEFT\_CLICK);
//2、左键双击事件
handler.setInputAction(function(click){
console.log('左键双击事件：',click.position);
},Cesium.ScreenSpaceEventType.LEFT\_DOUBLE\_CLICK);
//3、左键按下事件
handler.setInputAction(function(click){
console.log('左键按下事件：',click.position);
},Cesium.ScreenSpaceEventType.LEFT\_DOWN);
//4、左键弹起事件
handler.setInputAction(function(click){
console.log('左键弹起事件：',click.position);
},Cesium.ScreenSpaceEventType.LEFT\_UP);
//5、中键单击事件
handler.setInputAction(function(click){
console.log('中键单击事件：',click.position);
},Cesium.ScreenSpaceEventType.MIDDLE\_CLICK);
//6、中键按下事件
handler.setInputAction(function(click){
console.log('中键按下事件：',click.position);
},Cesium.ScreenSpaceEventType.MIDDLE\_DOWN);
//7、中键弹起事件
handler.setInputAction(function(click){
console.log('中键弹起事件：',click.position);
},Cesium.ScreenSpaceEventType.MIDDLE\_UP);
//8、移动事件
handler.setInputAction(function(movement){
console.log('移动事件：',movement.endPosition);
},Cesium.ScreenSpaceEventType.MOUSE\_MOVE);
//9、右键单击事件
handler.setInputAction(function(click){
console.log('右键单击事件',click.position);
},Cesium.ScreenSpaceEventType.RIGHT\_CLICK);
//10、右键按下事件
handler.setInputAction(function(click){
console.log('右键按下事件',click.position);
},Cesium.ScreenSpaceEventType.RIGHT\_DOWN);
//11、右键弹起事件
handler.setInputAction(function(click){
console.log('右键弹起事件',click.position);
},Cesium.ScreenSpaceEventType.RIGHT\_UP);
//12、滚轮事件
handler.setInputAction(function(wheelment){
console.log('滚轮事件：',wheelment);
},Cesium.ScreenSpaceEventType.WHEEL);
//删除事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT\_CLICK);
iframe父页调子页和子页调父页方法
子页调用父页
window.parent.myChart.resize();
父页调用子页
$("iframe")[0].contentWindow.myChart.resize();
//拖动div
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 50px;
left:200px;
top:200px;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body >
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) {
$(".moveBar").css("margin","0px")
var isMove = true;
var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
var obj = $('.moveBar');
//还原样式，并获取
obj.css({
'left': $('div.moveBar').offset().left-50,
'top': $('div.moveBar').offset().top-50
});
$(".moveBar").css("margin-left","50px")
$(".moveBar").css("margin-top","50px")
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>