禁止图片被拖拽，兼容谷歌，火狐，IE浏览器

禁止图片被拖拽：

接到需求在网上找了很多方法，

1、如下火狐浏览器有问题

for (i in document.images) document.images[i].ondragstart = imgdragstart;

function imgdragstart() {
      return false;
}

2、这种方法过于复杂，ie浏览器有问题

window.ondragstart=function(event){

    console.log(event)
    if(event.target.tagName.toUpperCase() =='IMG') {
      // alert(1)
      // Chrome
      return false;
    }else if(event.explicitOriginalTarget && event.explicitOriginalTarget.tagName.toUpperCase() == 'IMG') {
      alert(2)
      // 火狐
      return false;
    }else if($(event.target).has('>img').length) {
      alert(3)
      // IE
      return false;
    }
}

当img标签外有可跳转的按标签时，拖拽事件event的target对象是a标签对象，不是img导致产生问题

3、考虑到2方法中的问题，想着通过其他事件获取到当前拖拽的对象，思路：在拖拽事件产生过程前还会触发哪些事件，这样想到了mousedown，进行了测试拖拽图片时，event的target对象在不同浏览器中都是img标签对象，这样解决问题的代码如下：

// 禁止图片被拖拽
function undragImg() {
    var mousedownTagName = ''
    document.addEventListener('mousedown', function (e) {
        mousedownTagName = e.target.tagName.toUpperCase()
    }, false)
    document.addEventListener('mouseup', function (e) {
        mousedownTagName = ''
    }, false)
    window.ondragstart=function(e){
        if(mousedownTagName == 'IMG') {
            return false
        }
    }
}
undragImg()