Click Event Example

http://openlayers.org/dev/examples/click.html

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<h1 id="title">Click Event Example</h1>

<div id="tags">
  click control, double, doubleclick, double-click, event, events, propagation, light
</div>

<p id="shortdesc">
  This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click.
</p>

<div id="map" class="smallmap"></div>

<div id="docs">
  <p>Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get
    two alerts.) This example click control shows you how to use it.</p>
</div>

<br />
<p><a href="http://openlayers.org/dev/examples/click.html">Original
  OpenLayers Example</a>.</p>

CSS

.olControlAttribution {
              bottom: 5px;
            }

            #map {
              width: 600px;
              height: 400px;
            }

JavaScript

(function($) {

  OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
      'single': true,
      'double': false,
      'pixelTolerance': 0,
      'stopSingle': false,
      'stopDouble': false
    },

    initialize: function(options) {
      this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
      OpenLayers.Control.prototype.initialize.apply(
        this, arguments);
      this.handler = new OpenLayers.Handler.Click(
        this, {
          'click': this.trigger
        }, this.handlerOptions);
    },

    trigger: function(e) {
      var lonlat = map.getLonLatFromViewPortPx(e.xy);
      alert('You clicked near ' + lonlat.lat + ' N, ' + lonlat.lon + ' E');
    }

  });
  var map;

  function init() {
    map = new OpenLayers.Map('map');

    var ol_wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0?', {
      layers: 'basic'
    });

    var jpl_wms = new OpenLayers.Layer.WMS('NASA Global Mosaic', 'http://t1.hypercube.telascience.org/cgi-bin/landsat7', {
      layers: 'landsat7'
    });

    jpl_wms.setVisibility(false);

    map.addLayers([ol_wms, jpl_wms]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
    map.zoomToMaxExtent();

    var click = new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();

  }

  init();
})(jQuery);