使用CSS一次将draggable=“false”应用于所有图像

kupeojn6  于 2023-01-18  发布在  其他
关注(0)|答案(5)|浏览(163)

为了防止用户在我的网站上拖拽图片,看来我不得不这样做:<img draggable="false" src="../example.jpg" style="width:100%">.
但是我有一堆图像要应用,所以我想知道是否有办法将它应用于CSS中的所有图像。

c2e8gylq

c2e8gylq1#

你不能用css来做这件事,但是你可以通过JS(在这个例子中是jQuery)来做。

$('img').attr('draggable', false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
gzszwxb4

gzszwxb42#

您可以使用以下CSS:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
oyxsuwqo

oyxsuwqo3#

改变元素的行为和交互性并不是CSS真正的目的(它是为了处理布局和外观)。
您可以设置user-draguser-select(和浏览器变体)所有图像的CSS属性,或者你可以使用CSS选择器来访问和操作一组具有给定类或ID的元素,而不是直接针对该类型的每个元素。因为你的图像上似乎没有任何CSS类,所以你必须针对img元素,这目前会影响页面上的每个图像。
您可以使用基本的JavaScript(参见代码片段)或jQuery来完成此操作:

$('img').attr('draggable', false);

例如,如果您以后只想使某个组/类型的图像可拖动,则可以对它们应用CSS类,并使用它来仅定位具有该类的图像,而不是更改 * every * img元素的属性。
x一个一个一个一个x一个一个二个一个x一个一个三个一个

vyswwuz2

vyswwuz24#

有没有一种方法可以将它应用于CSS中的所有图像?
不,没有跨浏览器的方式来做它只与CSS。
-webkit-user-drag,但在Firefox中不起作用。

gojuced7

gojuced75#

禁止所有拖动:(所有浏览器,无jQuery)

addEventListener('dragstart',function(e){e.preventDefault()});

相关问题