Как отключить перетаскивание Firefox по умолчанию для всех изображений с помощью jQuery?

Question

Firefox имеет такое раздражающее поведение, что позволяет пользователю перетаскивать любой элемент изображения по умолчанию. Как я могу полностью отключить это поведение по умолчанию с помощью jQuery?

Answer 1

Следующее будет делать это в Firefox 3 и более поздних версиях:

$(document).on("dragstart", function() {
     return false;
});

Если вы предпочитаете не отключать все перетаскивания (например, вы можете разрешить пользователям перетаскивать ссылки на свою панель инструментов ссылок), вы можете убедиться, что предотвращено только перетаскивание элементов <img>:

$(document).on("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

Помните, что это позволит перетаскивать изображения внутри ссылок.

Answer 2

Это должен быть jQuery? Вам просто нужно определить функцию обратного вызова для вашего события mousedown для рассматриваемого изображения с помощью event.preventDefault().

Итак, ваш тег изображения может выглядеть так:

<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />

Требуется дополнительный if, потому что в противном случае IE выдает ошибку. Если вы хотите это для всех тегов изображения, вам просто нужно перебрать теги img с помощью jQuery и прикрепить обработчик события onmousedown.

На этой странице есть хорошее объяснение (и пример): « Отключить перетаскивание изображений в FireFox », и здесь не очень хорошо документированная версия с использованием jQuery в качестве ссылки: « Disable Firefox Image Drag"

Answer 3

Если Javascript является необязательным требованием, вы можете попробовать с CSS

.wrapper img {
    pointer-events: none;
}

Answer 4

Решение без jQuery:

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

Answer 5

Ссылка Решение Тим Дауна , вы можете получить эквивалент его второго фрагмента кода, отключив только img перетаскивания при использовании jQuery:

$(document).on("dragstart", "img", function() {
     return false;
});

Answer 6

Я не помню свой источник, но работаю

  <script type="text/javascript">

  // register onLoad event with anonymous function
window.onload = function (e) {
    var evt = e || window.event,// define event (cross browser)
        imgs,                   // images collection
        i;                      // used in local loop
    // if preventDefault exists, then define onmousedown event handlers
    if (evt.preventDefault) {
        // collect all images on the page
        imgs = document.getElementsByTagName('img');
        // loop through fetched images
        for (i = 0; i < imgs.length; i++) {
            // and define onmousedown event handler
            imgs[i].onmousedown = disableDragging;
        }
    }
};

// disable image dragging
function disableDragging(e) {
    e.preventDefault();
}
</script>