Firefox 防止图片拖拽

Question

I have a link with background image which is in a carousel. The problem is that whenever the user drags the carousel, the image get dragged instead with a ghost image visible when dragging. This causes inconsistent dragging behaviour for the carousel. I tried using user-select: none , but it only works in Chrome and Edge. How do I disable image dragging in Firefox? Adding draggable="false" on anchor tag also doesn't work

Run below code in Firefox to test. Try to drag the image and observe the behaviour.

 .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>

Answer 1

You have missed the = in the HTML attribute

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

And remove user-select: none;

Full working code

 .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>

Update:

As @kaiido said in the comment user-select has an influence here.

And is an open issue in firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1376369

Answer 2

You can prevent default action on mousedown event for the image

<img src="test.png" onmousedown="if (event.preventDefault) event.preventDefault()">

You can disable this for all image using

window.onload = function (e) {
    var evt = e || window.event, imgs, i;
  
    if (evt.preventDefault) {
        imgs = document.getElementsByTagName('img');
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onmousedown = disableDragging;
        }
    }
};
 
function disableDragging(e) {
    e.preventDefault();
}

In your case you can replace the tag