есть вот такая страничка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40">
<html>
<head>
<style type="text/css"> html {overflow:hidden}</style>
<style type="text/css">
html, body
{
width : 100%;
height : 100%;
}
#map
{
width : 100%;
height : 100%;
position: absolute;
z-index: 0;
}
#mapcanvas
{
left: 0;
top: 0;
margin: 0px 0px 0px 0px;
padding : 0px;
position: absolute;
z-index: 1;
<!--pointer-events:none;-->
}
body
{
margin: 0;
padding: 0;
}
</style>
<title>Yandex 2.0</title>
<script src="http://api-maps.yandex.ru
<script type="text/javascript">
ymaps.ready(init);
var lon=37.61770
var lat=55.75582
var zoom=11
var map;
function init() {
map = new ymaps.Map("map", {
center: [lon,lat]
}
);
map.behaviors.enable("scrollZoom");
map.setCenter([lon,lat], zoom, {checkZoomRange: false});
}
function YaUnload() {
map.destroy();
}
function getRandomArbitary(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function drawRects() {
var c = document.getElementById("mapcanvas");
var ctx = c.getContext("2d");
c.width = document.getElementById("map").clientWidth;
c.height = document.getElementById("map").clientHeight;
ctx.clearRect(0, 0, c.width, c.height);
var min = 1;
var max = 1000;
for (var i = min; i < max; i++){
ctx.fillStyle="#" + getRandomArbitary(1, c.width);
ctx.fillRect(getRandomArbitary(1, c.width), getRandomArbitary(1, c.height), 8, 8);
}
}
</script>
</head>
<body onunload=YaUnload()>
<div style="width:100%; height:100%" id="base">
<!--<input type="button" value="Draw images" onclick="drawImages();"/>-->
<canvas id="mapcanvas">
</canvas>
<div id="map">
</div>
</div>
<script>
var mapcanvas = document.getElementById("mapcanvas");
var mapdiv = document.getElementById("map");
var basediv = document.getElementById("base");
mapcanvas.onclick = function(e){
e.preventDefault();
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
e.screenX, // screenX
e.screenY, // screenY
e.clientX, // clientX
e.clientY, // clientY
e.ctrlKey, // ctrlKey
e.altKey, // altKey
e.shiftKey, // shiftKey
e.metaKey, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget
);
mapdiv.dispatchEvent(evt);
}
mapcanvas.onmousedown = function(e){
e.preventDefault();
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousedown",
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
e.screenX, // screenX
e.screenY, // screenY
e.clientX, // clientX
e.clientY, // clientY
e.ctrlKey, // ctrlKey
e.altKey, // altKey
e.shiftKey, // shiftKey
e.metaKey, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget
);
mapdiv.dispatchEvent(evt);
}
mapcanvas.onmousemove = function(e){
e.preventDefault();
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousemove",
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
e.screenX, // screenX
e.screenY, // screenY
e.clientX, // clientX
e.clientY, // clientY
e.ctrlKey, // ctrlKey
e.altKey, // altKey
e.shiftKey, // shiftKey
e.metaKey, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget
);
mapdiv.dispatchEvent(evt);
}
mapcanvas.onmouseup = function(e){
e.preventDefault();
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseup",
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
e.screenX, // screenX
e.screenY, // screenY
e.clientX, // clientX
e.clientY, // clientY
e.ctrlKey, // ctrlKey
e.altKey, // altKey
e.shiftKey, // shiftKey
e.metaKey, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget
);
mapdiv.dispatchEvent(evt);
}
//drawImages();
drawRects();
//drawShapes();
</script>
</body>
</html>
как правильно передавать мышиные события из mapcanvas в mapdiv?
(чтобы карта ролировалась. pointer-events:none; не предлагать.)
окажите вспоможение!