Block onmousedown for child element

Question

Sorry for my bad english. I have the following construction.

<div onmousedown="drag_drop(ev)" class="abc">
     <img src="test.jpg"></img>
     <div class="xyz"></div>
</div>

When I drag the picture, the "onmousedown" event is triggered. How can I prevent this? I need the "abc" block being moved when "test.jpg" is dragged.

Answer 1

You have to check if the target of the event is right, for example:

drag_drop = function ( evt ) {
  if ( evt.target.classList.contains( 'abc' ) ) {
    //you have clicked the outer div
  }
}