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

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

.wrapper img {
    pointer-events: none;
}

Ответ 4

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

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

Ответ 5

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

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

Ответ 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>