let img = document.getElementById("img");
img.addEventListener("click" , function handleClick() {
if (img.style.width = "60%") {
img.style.opacity = "0.5";
}
});.img {
width: 60%;
cursor: pointer;
/* pointer-events: none; */
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg" class="img" id="img">
</body>
</html> pointer-events:none;
but allow browser menu (open image in a new tab or save image as).
If not possible with only CSS, then how to get browser width as a condition to disable click event in specific width with JavaScript, but again allow browser menu (open image in a new tab or save image as)?
it's like disable click for the code only but not for the browser menu options.