How to make click prevent in draggable?

Question

JavaScript

Welcome all!
There is an SVG map:

<div class="map-rent">
      <div class="map-build">
          <?=$row->svg?>
      </div>
    </div>

Inside, of course, G, rect , path elements

$('.map-build').draggable(
    {
      drag: function (event, ui) {
       
      }
    }
  );

One thing is not clear. When you grab an SVG and drag it, it processes any "click" event on the .map-rent g > rect or .map-rent g > path
selector. How to find out when you just dragged and when you just clicked.
Googling, I found this solution:

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})

The problem is that my ui argument is not clickable, but .map-rent g > rect or .map-rent g > path . These are nested nodes in this very ui
I tried everything in different ways, I can’t figure out how to do prevent while dragging

Answer 1

Try event.preventDefault(); replace with console.log(event.type). Find out what events are triggered

Answer 2

event.stopPropagation allows you to cancel the action of the parent can help