CODEWITHSUNDEEP
javascriptcssgoogle-chromegoogle-chrome-extension
Joakim
Joakim

Reputation: 2142

How can I prevent images from being zoomed in/out when clicked?

When I open large images in the browser (e.g., https://some-image.jpg), Chrome will show a 'zoom-in' cursor, and zoom the image then clicked (and zoom back out when clicked again).

This happens despite there being no JavaScript on the page at all, and no event listeners anywhere in the document. The zoom happens after onmousedown, during or after the onmouseup, and before onclick. I have tried all the usual JS for cancelling events. For instance, this has no effect:

imgElement.addEventListener('mouseup', (e) => {
    e.cancelBubble = true;
    e.stopPropagation();
    e.preventDefault();
    e.returnValue = false;
    e.cancel = true;
}, false);

Is there a way to prevent this behavior?

EDIT: I should clarify that the zoom behavior I want to prevent is Chrome's default behavior for images.

Upvotes: 0

Views: 1180

Answers (1)

spadletskys
spadletskys

Reputation: 125

Maybe override the cursor with anotehr cursor instead of zoom-in:

css file

img {
cursor: pointer !important;
}

That should do it

Upvotes: 1

Related Questions