zoukankan      html  css  js  c++  java
  • 鼠标拖拽时,选择文字问题

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

          

  • 相关阅读:
    YAML 语法小结
    小程序之脚本语言
    小程序WXML 使用小结
    微信小程序 js逻辑
    小程序开发1
    联想Y7000安装Ubuntu16.04/Win10双系统,wifi问题,显卡驱动和CUDA10安装
    VS2015中配置Eigen
    联想Y700安装显卡驱动和CUDA8.0
    php微信生成微信公众号二维码扫描进入公众号带参数
    Y7000 (1)安装ubuntu1604遇到的问题
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10154410.html
Copyright © 2011-2022 走看看