0

I am implementing a leaflet map for the salesforce mobile app. The problem is that touch events on the map are propagated up to the page itself. So when I pull the map down it scrolls the whole page (Note that this seems to only happen on some mobile devices).

I already tried to stop event propagation of the "touchmove" event but doing that it disables the whole movement functionality of my map. I attached another "move" listener to the map itself to check order of execution and it seems that when I stop propagation on the div Elements it never reaches the Leaflet map component.

<div aura:id="mainContainer" id="mainContainer">
<div class="childContainer" id="child" aura:id="child">
    <div class="map-wrapper slds-grid" id="map-wrapper" aura:id="map-wrapper">
        <div aura:id="map" id="map">
        </div>
    </div>
</div>

afterRender: function (component, helper) {
var map = component.find("map").getElement();
var child = component.find("child").getElement();
var mapWrapper = component.find("map-wrapper").getElement();


map.addEventListener(
    "touchmove",
    function(e) {
        alert("map");
    },
    false
);

child.addEventListener(
    "touchmove",
    function(e) {
        alert("child");
    },
    false
);

mapWrapper.addEventListener(
    "touchmove",
    function(e) {
        alert("map-wrapper");
    },
    false
);}

I need to be able to recenter and zoom the map but also to stop any touch events from reaching top of the hierarchy (so I can get rid of pull to refresh).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.