鼠标拖拽时,选择文字问题

  if()与if() else if()的区别?

  if()要考虑顺序,写多个条件时,输出结果可能会多个,条件会同时执行,及考验写的顺序

  if() else if()无需考虑顺序,写多个条件时,输出结果只能是1个,条件只会执行一个

  H5新增获取元素的方法:

    document.querySelectorAll()  因返回的是数组,所以()只能写(   div(标签)  .div(class))

    document.querySelector()   (获取的是单个元素)(如果是标签的话就只获取第一个)

    ()里面可以写  div(标签)  .div(class)  #div(id)  

  return false 阻止默认事件

  问题:在拖拽元素的时候,如果元素内部加了文字和图片,拖拽效果会失灵?

    解决办法:

      兼容性:

        标准浏览器: 阻止事件的默认行为;

        ie低版本:采取setcapture() 全局捕获的方法;(为ie低版本特有)

    setcapture()给一个元素添加了这个方法之后,无论我们在页面的哪个地方触发相同事件,都会触发这个元素;

  拖拽效果失灵的原因:

    浏览器会给文字和图片一个默认行为,当文字或图片被选中的时候,会有一个拖拽的效果,即使没有人为给他添加,所以当我们点击这个元素拖拽时,有可能,选中文字或图片转移浏览器天生给的那个行为,从而导致,我们写的那个拖拽的效果失灵;

  怎么去解决:

    在onmousedown下

      if(div.setCapture){   

        div.setCapture()

      }   //ie低版本下当我们点击元素的时候,浏览器会把元素身上事件,全部转移给div,阻碍了文字和图片被选中的行为

      else{

        ev.preventDefault?ev.preventDefault():ev.returnValue=false;

      }   //标准浏览器直接把浏览器自动选中图片和文字的默认行为取消了

    但是ie低版本的setCapture()这个方法有很霸道的一面:会把所有跟他相同的事件都捕获到,执行自己的事件

    所以要在鼠标抬起的时候,执行另一个方法;取消全局捕获releaseCapture;

      if(div.releaseCapture){

          div.releaseCapture

      }

     (适用于ie低版本)

      

posted on 2018-12-21 10:41  Web引领者  阅读(1674)  评论(0编辑  收藏  举报