Блог

Главная - Вопросы по программированию - Как я могу предотвратить увеличение / уменьшение изображения при нажатии?

Как я могу предотвратить увеличение / уменьшение изображения при нажатии?

#javascript #css #google-chrome #google-chrome-extension

#javascript #css #google-chrome #google-chrome-расширение

Вопрос:

Когда я открываю большие изображения в браузере (например, https://some-image.jpg ), Chrome покажет курсор «увеличения» и увеличит изображение, на которое затем нажали (и уменьшит масштаб при повторном нажатии).

Это происходит, несмотря на то, что на странице вообще нет JavaScript и нигде в документе нет прослушивателей событий. Масштабирование происходит после onmousedown , во время или после onmouseup , и до onclick . Я перепробовал все обычные JS для отмены событий. Например, это не имеет никакого эффекта:

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

Есть ли способ предотвратить такое поведение?

РЕДАКТИРОВАТЬ: я должен уточнить, что поведение масштабирования, которое я хочу предотвратить, является поведением Chrome по умолчанию для изображений.

Комментарии:

1. Это поведение браузера по умолчанию. Итак, я предпочитаю не переопределять это. Поскольку некоторые пользователи могут счесть это полезным.

Ответ №1:

Возможно, переопределите курсор с помощью курсора anotehr вместо увеличения:

файл css

 img {
cursor: pointer !important;
}

Это должно сделать это

Комментарии:

1. К сожалению, нет. Он удаляет zoom-in курсор, но не увеличивает масштаб.

2. Или, если вы хотите использовать javascript document.getElementsByTagName('img')[0].style.cursor = 'pointer';

3. Ах, я знаю как!!! переопределите ширину и высоту, потому что браузер изменяет только ширину и высоту изображения. img { height: 499px; width: 799px; }

4. Спасибо, это разумный подход. Но мне нужно убедиться, что это работает для всех размеров изображений

5. Присвойте старые размеры изображения переменной, а затем используйте эту переменную для переопределения изображения : var width = document.getElementsByTagName('img')[0].style.width; var height = document.getElementsByTagName('img')[0].style.height; document.getElementsByTagName('img')[0].style.height = height document.getElementsByTagName('img')[0].style.width = width;

Метки: