Disable left- and right-button panning in LeafletJS map

Question

I am learning how to add Leafletjs map to an GUI and how to use JS to do it. I need to disable left and right mouse button panning or dragging.

Issue

I can disable all panning or dragging by using map.dragging.disable() outside the event listener, but I cannot disable just the left button and right button panning. My guess is that I am not catching the correct event or my if statment is not working.

Any guidance or help will be appreciated

Expected behavior

I want to disable panning using the left or right button of the mouse, but keep on panning with the middle mouse button.

What I have tried so far

var map;

           function initialize(){
           
           // ADD MAP
           map = L.map('map',{zoomSnap: 0, zoomControl: false, preferCanvas: true, inertia: false, doubleClickZoom: false, wheelPxPerZoomLevel: 30});

           //GET TILE
            L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', 
       {
           attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
           maxZoom: 10000, reuseTiles: true, unloadInvisibleTiles: true

       }
       ).addTo(map);            
        
            
          // DISABLE RIGTH CLICK MENU 
             document.addEventListener('contextmenu', event => event.preventDefault());
             
          // DISABLE LEFT AND RIGHT PANNIG
          document.addEventListener('mousemove', (e) => {
        
             // e.button === 0: the left button is clicked
             // e.button === 1: the middle button is clicked
             // e.button === 2: the right button is clicked
             // e.button === 3: the `Browser Back` button is clicked
             // e.button === 4: the `Browser Forward` button is clicked
        
          
          if (e.button != 1) {
            map.dragging.disable(); 
            } else {
            map.dragging.enable();
            }
          
                    
          }
          );
    
               
           // ADD SCALE
           var scale = L.control.scale();
           scale.addTo(map);
           
           //SET BOUNDS
           var southWest = new L.LatLng(-2.9125325724709503,-79.03575842000764),
           northEast = new L.LatLng(-2.9112682582356557,-79.03332932221451),
           bounds = new L.LatLngBounds(southWest, northEast);
           map.fitBounds(bounds, {padding: [0, 0]});

           // ADD REFERENCES
           L.marker([-2.9116417526879506,-79.0357487930094]).addTo(map);
           L.marker([-2.9119463620853674,-79.0349189315595]).addTo(map);
           L.marker([-2.9124030520806627,-79.03362467818663]).addTo(map);
           L.marker([-2.915692679208955,-79.02077600732176]).addTo(map);
           
                     
           // PyQt5 SIGNAL
           new QWebChannel(qt.webChannelTransport, function (channel) {
               window.MainWindow = channel.objects.MainWindow;
               if(typeof MainWindow != 'undefined') {
                   var onMapMove = function() 
                   { 
                   MainWindow.onMapMove(map.getBounds().getWest(), map.getBounds().getNorth(), map.getBounds().getSouth(), map.getBounds().getEast())
                   };
                   map.on('move', onMapMove);
                   onMapMove();
               }
           });
           }

Answer 1

Solution

For anybody just learning JS like me, the website @IvanSanchez suggested was helpfull, this is the code that solve it for me. (developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button) developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

The logic behind it was:

Every time button 0 or 2 is pressed (mousedown) it disables the map panning, but then when it comes back up (mouseup) the map panning is enabled again.

                // e.button === 0: the left button is clicked
                // e.button === 1: the middle button is clicked
                // e.button === 2: the right button is clicked
                // e.button === 3: the `Browser Back` button is clicked
                // e.button === 4: the `Browser Forward` button is clicked
             
                // DISABLE LEFT AND RIGHT PANNIG
                document.addEventListener('mousedown', (e) => {
                    if (e.button != 1) {map.dragging.disable();}
                }
                );
    
                document.addEventListener('mouseup', (e) => {
                    if (e.button != 1) {map.dragging.enable();} 
                }
                );