Community

OnMouseOver and OnClick do not work together for GraphicsLayer

3732
2
03-15-2012 11:44 PM
philippenn
by
Occasional Contributor
‎03-15-2012 11:44 PM
If I have graphics in my map and attach the following:-

  dojo.connect(map.graphics, "onMouseOver", function(evt) {  console.log("onMouseOver"); });
  dojo.connect(map.graphics, "onClick", function(evt) {  console.log("onClick"); });

I am only getting onMouseOver. If I comment that event line out then I receive onClick events. But never both.

cheers,

Phil

ps this is not the same as http://forums.arcgis.com/threads/8832-OnMouse-Events-disable-OnClick-event-for-FeatureLayers because I'm not using FeatureLayers, just the map.graphics graphicslayer.
pps 2.7
0 Kudos
2 Replies
philippenn
by
Occasional Contributor
‎03-16-2012 08:52 AM
Strangely, I can receive onMouseDown so I'm going with that for the moment...I should add that I'm popping up an InfoWindow in my onMouseOver, but that it is offset not to appear over the graphic.
0 Kudos
ThaoLe
by
New Contributor III
‎03-16-2012 09:10 AM
I can't reproduce the problem.

Here's my code. Click on Add Point and then hover or click on the point.

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Shapes and Symbols</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.layers.agstiled");

        var map, tb;
        function init() {
            map = new esri.Map("map");
            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
        }

        function mouseOver() {
            document.getElementById("mouseEvent").value = "MouseOver";
        }
        function mouseClick() {
            document.getElementById("mouseEvent").value = "onClick";
        }

        function addPoint() {
            var symbol = new esri.symbol.SimpleMarkerSymbol(); //new esri.symbol.TextSymbol("Hello \n\r World");
            var i = 0;
            var negative = true;



            var graphicsLayer = new esri.layers.GraphicsLayer();

            var x = -50;
            var y = 32;
            var geometry = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 4326 }));
            graphicsLayer.add(new esri.Graphic(geometry, symbol));

            map.graphics.add(new esri.Graphic(geometry, symbol));

            dojo.connect(map.graphics, "onMouseOver", mouseOver);
            dojo.connect(map.graphics, "onClick", mouseClick);
        }

        dojo.addOnLoad(init);

        function recenter() {
            var center = map.extent.getCenter();
            document.getElementById("map").style.width = "1000px";

            var resizeTimer;
            resizeTimer = setTimeout(function () {
                map.resize();
                map.reposition();
            }, 0);

            map.centerAt(center);
        }

        function clearGraphics() {
            var layerArray = map.graphicsLayerIds;
            for (i = 0; i < layerArray.length; i++) {
                var layer = map.getLayer(map.graphicsLayerIds);
                layer.clear();
            }
        }
    </script>
</head>
<body class="tundra">
    <button onclick="addPoint()">
        Point</button>
    <button onclick="recenter()">
        Recenter</button>
    <button onclick="clearGraphics()">
        Clear</button>
    <div id="map" style="width: 500px; height: 500px; border: 2px solid #000;" class="tundra">
    </div>
    <input type="text" id="mouseEvent" />

</body>
</html>
[/HTML]
0 Kudos