时间戳

首页 > 解决方案 > 防止在 Firefox 中拖动图像

javascript - 防止在 Firefox 中拖动图像

问题描述

我有一个与旋转木马中的背景图像的链接。问题在于，每当用户拖动轮播时，图像都会被拖动，而在拖动时会出现重影图像。这会导致轮播的拖动行为不一致。我尝试使用user-select : none，但它只适用于 Chrome 和 Edge。如何在 Firefox 中禁用图像拖动？添加draggable="false"锚标记也不起作用

在 Firefox 中运行以下代码进行测试。尝试拖动图像并观察行为。

.disable-dragging  {
  display: block;
  width: 200px;
  height: 200px;
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  background-size: cover;
  background-color: #cccccc;
  user-select: none;
}
<a href="#" class="disable-dragging" draggable="false"></a>

标签： javascripthtmlcss

解决方案

您错过了=HTML 属性中的

<a href="#" class="disable-dragging" draggable="false"></a>

并删除user-select: none;

完整的工作代码

.disable-dragging {
  display: block;
  width: 200px;
  height: 200px;
  background-image: url('https://homepages.cae.wisc.edu/~ece533/images/fruits.png');
  background-size: cover;
  background-color: #cccccc;
  /* user-select: none; */
}
<a href="https://google.com" class="disable-dragging" draggable="false"></a>

更新：

正如@kaiido 在评论user-select中所说，这里有影响。

并且是 Firefox 中的一个未解决问题 - https://bugzilla.mozilla.org/show_bug.cgi?id=1376369

推荐阅读