Computer >> Máy Tính >  >> Lập trình >> HTML

Ngăn hình ảnh có thể kéo hoặc có thể chọn trong HTML mà không sử dụng JS


Thêm đoạn mã sau vào thuộc tính hình ảnh và ngăn hình ảnh được kéo và chọn.

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

Khi nhấp đúp vào một văn bản hoặc hình ảnh, nó sẽ được đánh dấu (đã chọn). Thuộc tính lựa chọn của người dùng có thể được sử dụng để ngăn chặn điều này. Bằng cách đặt thuộc tính này thành không, chúng tôi có thể ngăn hình ảnh của mình được chọn (đánh dấu).

Ví dụ

Bạn có thể thử chạy mã sau để ngăn hình ảnh được chọn -

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            -drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
   </body>
</html>