OpenLayers OpenLayers

Ticket #1445: onchange.html

File onchange.html, 2.0 kB (added by vmx, 5 months ago)

Example of the problem

Line 
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html
3      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
4     "DTD/xhtml1-strict.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6   <head>
7     <title>Example for OpenLayers ticket #1445</title>
8     <style type="text/css">
9         #map1, #map2 {
10             border:1px solid black;
11             float:left;
12             height:256px;
13             margin:50px;
14             width:256px;
15         }
16     </style>
17
18     <script src="http://www.openlayers.org/api/OpenLayers.js"
19             type="text/javascript"></script>
20     <script type="text/javascript">
21 var map = null;
22 function init(){
23     var options = {
24             controls: [new OpenLayers.Control.PanZoom()]
25     };
26    
27     var wms1 = new OpenLayers.Layer.WMS(
28             "OpenLayers WMS",
29             "http://labs.metacarta.com/wms/vmap0?",
30             {layers: 'basic'}
31     );
32    
33     map1 = new OpenLayers.Map('map1', {
34             controls: [new OpenLayers.Control.PanZoom()]
35     });
36     map1.addLayer(wms1);
37     map1.zoomToMaxExtent();
38    
39     var wms2 = new OpenLayers.Layer.WMS(
40             "OpenLayers WMS",
41             "http://labs.metacarta.com/wms/vmap0?",
42             {layers: 'basic'}
43     );
44
45     map2 = new OpenLayers.Map('map2', {
46             controls: [new OpenLayers.Control.MouseDefaults()]
47     });
48     map2.addLayer(wms2);
49     map2.zoomToMaxExtent();
50 }
51     </script>
52   </head>
53   <body onload="init()">
54     <p>First click on the input box, change the contents and then click on one
55     of the maps. If the onchange event gets fired, you'll get an alert box</p>
56     <p>The bug seems to be caused by some controls. The left map (with PanZoom
57     control) handles the event as expected, the right not (MouseDefaults
58     control).
59     </p>
60     <p>It also occurs on the onblur event (not included here as it can lead
61     to an ultimate alert box hell)</p>
62     <form action="">
63       <p><input onchange="alert('onchange');"/></p>
64     </form>
65     <div id="map1"></div>
66     <div id="map2"></div>
67   </body>
68 </html>
69