鼠標拖拽時,選擇文字問題


  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低版本)

      


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM