如何防止在React应用中拖放图像？

Question

We got how to prevent drag drop image with jquery with $('img').on('dragstart', function(event) { event.preventDefault(); }); but I want to achieve the same in a react app, and without jquery. How can I do this ? a) locally (image per image) b) globally (for all images of the react app)

I still want to keep control over other interactions, so img { pointer-events: none; } img { pointer-events: none; } is not a solution.

The goal is to prevent saving image through drag and drop.

Answer 1

You can use onDragStart :

onDragStart={this.preventDragHandler}

And the handler:

preventDragHandler = (e) => {
  e.preventDefault();
}

Answer 2

For apps using HTML5, setting draggable={false} in react should accomplish this as well. It will wind up setting the HTML5 draggable attribute to "false".

Another option would be to just use CSS and set pointer-events: none; on the image.