2

I have a Leaflet map on a page that I developed as part of a school assignment. The ID of the map element is mapid. I have added mouse listeners to mapid. When I enter the area of mapid on my page, the listener fires a hover event and on most of the surface of mapid the listener tracks clicks. But there are a few patches of blind spots on mapid, where the mouse listener for some reasons leaves the area of mapid and enters the area of another element without an ID although the mouse cursor has indeed not left the area of mapid.

Here is my HTML code:

<html xml:lang="de" lang="de">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
    <script src="stylesheet" href="https://unpkg.com/esri-leaflet@2.0.8"></script>
    <script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>

    <script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js">
    </script>

    <link rel="stylesheet" type="text/css"
        href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">



    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="mapid" style="width: 1287px; height: 300px; position: relative; outline: none;"
        class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
        tabindex="0">
        <div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
            <div class="leaflet-pane leaflet-tile-pane">
                <div id="zoomOut" class="leaflet-layer " style="z-index: 1; opacity: 1;">
                    <div id="zoomOut" class="leaflet-tile-container leaflet-zoom-animated"
                        style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt=""
                            role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4093/2723.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(56px, -91px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4094/2723.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(312px, -91px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4093/2724.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(56px, 165px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4094/2724.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(312px, 165px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4092/2723.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(-200px, -91px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4095/2723.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(568px, -91px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4092/2724.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(-200px, 165px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4095/2724.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(568px, 165px, 0px); opacity: 1;">
                    </div>
                </div>
            </div>
            <div class="leaflet-pane leaflet-shadow-pane"><img
                    src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
                    class="leaflet-marker-shadow leaflet-zoom-animated" alt=""
                    style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);">
            </div>
            <div class="leaflet-pane leaflet-overlay-pane"><svg pointer-events="none" class="leaflet-zoom-animated"
                    width="720" height="480" viewBox="-60 -40 720 480"
                    style="transform: translate3d(-60px, -40px, 0px);">
                    <g>
                        <path class="leaflet-interactive" stroke="red" stroke-opacity="1" stroke-width="3"
                            stroke-linecap="round" stroke-linejoin="round" fill="#f03" fill-opacity="0.5"
                            fill-rule="evenodd"
                            d="M141.20355555554852,171.94704600190744a42,42 0 1,0 84,0 a42,42 0 1,0 -84,0 "></path>
                        <path class="leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3"
                            stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2"
                            fill-rule="evenodd" d="M358 163L474 219L550 153z"></path>
                    </g>
                </svg></div>
            <div class="leaflet-pane leaflet-marker-pane"><img
                    src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png"
                    class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0"
                    style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(300px, 247px, 0px); z-index: 247;">
            </div>
            <div class="leaflet-pane leaflet-tooltip-pane"></div>
            <div class="leaflet-pane leaflet-popup-pane">
                <div class="leaflet-popup  leaflet-zoom-animated"
                    style="opacity: 1; transform: translate3d(301px, 213px, 0px); bottom: -7px; left: -57px;">
                    <div class="leaflet-popup-content-wrapper"></div>
                    <div class="leaflet-popup-tip-container">
                        <div class="leaflet-popup-tip"></div>
                    </div><a class="leaflet-popup-close-button" href="#close">×</a>
                </div>
            </div>
            <div class="leaflet-proxy leaflet-zoom-animated"
                style="transform: translate3d(1.04805e+06px, 697379px, 0px) scale(4096);"></div>
        </div>
        <div class="leaflet-control-container">
            <div class="leaflet-top leaflet-left">
                <div id="leafletBar" class="leaflet-control-zoom leaflet-bar leaflet-control"><a id="zoomIn"
                        class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button"
                        aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out"
                        role="button" aria-label="Zoom out">−</a></div>
            </div>
            <div class="leaflet-top leaflet-right"></div>
            <div class="leaflet-bottom leaflet-left"></div>
            <div class="leaflet-bottom leaflet-right">
                <div class="leaflet-control-attribution leaflet-control"></div>
            </div>
        </div>
        <div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
            <div class="leaflet-pane leaflet-tile-pane">
                <div class="leaflet-layer " style="z-index: 1; opacity: 1;">
                    <div class="leaflet-tile-container leaflet-zoom-animated"
                        style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt=""
                            role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(124px, 4px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(124px, -252px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(-132px, 4px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(380px, 4px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(124px, 260px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(-132px, -252px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(380px, -252px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(-132px, 260px, 0px); opacity: 1;"><img
                            alt="" role="presentation"
                            src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
                            class="leaflet-tile leaflet-tile-loaded"
                            style="width: 256px; height: 256px; transform: translate3d(380px, 260px, 0px); opacity: 1;">
                    </div>
                </div>
            </div>
            <div class="leaflet-pane leaflet-shadow-pane"><img
                    src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
                    class="leaflet-marker-shadow leaflet-zoom-animated" alt=""
                    style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(-78224px, 9814px, 0px);">
            </div>
            <div class="leaflet-pane leaflet-overlay-pane"><svg pointer-events="none" class="leaflet-zoom-animated"
                    width="720" height="480" viewBox="-60 -40 720 480"
                    style="transform: translate3d(-60px, -40px, 0px);">
                    <g>
                        <path class="leaflet-interactive" stroke="red" stroke-opacity="1" stroke-width="3"
                            stroke-linecap="round" stroke-linejoin="round" fill="#f03" fill-opacity="0.5"
                            fill-rule="evenodd" d="M0 0"></path>
                        <path class="leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3"
                            stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2"
                            fill-rule="evenodd" d="M0 0"></path>
                    </g>
                </svg></div>
            <div class="leaflet-pane leaflet-marker-pane"><img
                    src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png"
                    class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0"
                    style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-78224px, 9814px, 0px); z-index: 9814;">
            </div>
            <div class="leaflet-pane leaflet-tooltip-pane"></div>
            <div class="leaflet-pane leaflet-popup-pane"></div>
            <div class="leaflet-proxy leaflet-zoom-animated"
                style="transform: translate3d(1.12658e+06px, 687812px, 0px) scale(4096);"></div>
        </div>
        <div class="leaflet-control-container">
            <div class="leaflet-top leaflet-left">
                <div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in"
                        href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a
                        class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button"
                        aria-label="Zoom out">−</a></div>
            </div>
            <div class="leaflet-top leaflet-right"></div>
            <div class="leaflet-bottom leaflet-left"></div>
            <div class="leaflet-bottom leaflet-right">
                <div class="leaflet-control-attribution leaflet-control"><a href="https://www.mapbox.com/">Mapbox</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        var mymap = L.map('mapid').setView([52.515803012883595, 13.38958740234375], 15);

        L.tileLayer(
            'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

                    id: 'mapbox.streets'
            }).addTo(mymap);
        var searchControl = new L.esri.Controls.Geosearch().addTo(mymap);

        var results = new L.LayerGroup().addTo(mymap);
        searchControl.on('results', function (data) {
            results.clearLayers();
            for (var i = data.results.length - 1; i >= 0; i--) {
                results.addLayer(L.marker(data.results[i].latlng).addEventListener('click', function (e) {
                    results.clearLayers();

                }))
            }
        });
    </script>
    <script src="script1.js" data-turbolinks-track="reload"></script>

    <script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"></script>    

</body>

</html>

This bit here is the JavaScipt code, that does the listening:

mapid = document.getElementById("mapid")
mapid.addEventListener("mouseover", function (event) {
    overFunction(event);
});
mapid.addEventListener("mouseout", function (event) {
    outFunction(event);
});

mapid.addEventListener("click", function (event) {
    focusFunction(event);
});

function overFunction(event) {
    mData = "hoveredOver,      mapid,       " + Date.now() + ",    " +
        event.clientX.toString() + "_" + event.clientY.toString()
    console.log(mData)
}

function outFunction(event) {
    mData = "hoveredAway,      mapid,       " + Date.now() + ",    " +
        event.clientX.toString() + "_" + event.clientY.toString()
    console.log(mData)
}

function focusFunction(event) {
    mData = "clickedOn,      mapid,         " + Date.now() + ",   " +
        event.clientX.toString() + "_" + event.clientY.toString()
    console.log(mData)
}

Here is what the outputs for the eventlisteners looks like:

Type of event    Element ID       timestamp       mouse coordinates

hoveredOver,     mapid,           1580381863148,   1238_449    
clickedOn,       mapid,           1580382072804,   1238_300
hoveredAway,     mapid,           1580382149916,   726_335
hoveredOver,          ,           1580382149918,   726_335
mouseClick,           ,           1580382153537,   726_340

As you can see, the third output says that I have hovered away from mapid. That's not true, as I had not left the area of mapid. And the last two outputs show that I entered and clicked on an element whose ID is basically an empty string. Why is this happening? How can I avoid it?

  • If you have HTML element elem1 above event listening element elem2, you will get mouseout event for elem2 as soon mouse goes over elem1, and if elem1 does not stop event propagation, you will get mouseover event for elem2 right after that. Since this is purely HTML question, I'm voting to close it here. – TomazicM Jan 30 at 13:58
  • 1
    And the answer is right at developer.mozilla.org/es/docs/Web/API/Element/mouseout_event : «mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.» – IvanSanchez Jan 30 at 14:01