CSS 圖片不允許鼠標拖動是我們在網頁開發中常常需要實現的一個功能,它可以保證圖片的版面整潔,同時避免用戶意外拖動影響用戶體驗。
img { pointer-events: none; user-select: none; }
上述代碼中,pointer-events: none;
表示圖片不響應鼠標事件,同時user-select: none;
可以禁止用戶對圖片進行選擇操作。
CSS 的這種實現方式適用于大部分瀏覽器,但在一些老舊瀏覽器中可能會出現兼容性問題。如果需要兼容性更好的方案,可以使用 JavaScript 實現:
const imgs = document.querySelectorAll('img'); imgs.forEach((img) =>{ img.ondragstart = () =>{ return false; }; });
上面代碼中的ondragstart
事件可以阻止圖片被鼠標拖拽,同樣起到了禁止拖動的作用,同時它也兼容了更多的瀏覽器。
總體來說,我們可以選擇上述兩種方式中的一種來實現不允許鼠標拖動圖片的效果,具體選擇哪種方式可以根據實際情況而定。
上一篇html畫曲線代碼
下一篇html用戶注冊界面代碼