学JQ也有一段时间了，想自己写个鼠标拖动层移动的效果（很简单，只是为了练习而已）于是就写下了下面的代码

 <!DOCTYPE html>

   <html>

   <head>

     <style>

     body{ background-color: #eef; }div{ padding: 20px; }

     #abc{

       width: 70px;

       height: 70px;

       position: absolute;

       background-color: #000000;

      
     }

      #abc:hover{

      cursor:default;

     }

     </style>

     <script src="jquery-1.8.3.min.js"></script>

   </head>

   <body>

     <div id="abc"></div>

   <script>

    $(function(){

        var md=false;

     var left;

     var top;

     var a;

     var b;

         $('#abc').mousedown(function(e){

                 md=true;

                 a=e.clientX - $(this).offset().left;

                 b=e.clientY - $(this).offset().top;

                 
          });

          $('#abc').mouseup(function(){

                 md=false;

          });

          $(document).mousemove(function(e){

                  left=e.clientX-a;

                 top=e.clientY-b;

                 if(md){

                     $('#abc').css({left:left,top:top});

                 }

          });

    });

  </script>

     </body>

   </html>

可是问题来了，那就是当我用鼠标拖动层的时候在chrome下鼠标变成了文本选择样式，也就是cursor:text，通过该CSS是没有办法改变的（在IE下没有问题）。然以后找啊找找啊找，终于找到了答案，那就是在$("#abc").mousedown的时候return false;一下就可以解决问题了，代码如下:

 $('#abc').mousedown(function(e){

                 md=true;

                 a=e.clientX - $(this).offset().left;

                 b=e.clientY - $(this).offset().top;

                 return false;

          });

原因是取消绑定的事件，但是这里我一直不知道是为什么，因为在鼠标点击的时候样子还是原来的饿啊，应该是在鼠标移动的时候才出现的这个原因，那为什么不是在mousemove的时候return false，而是在mousedown的时候return false呢？求高手解答！

在chrome下鼠标拖动层变文本形状的问题的更多相关文章

  1. 在chrome下的文本框sendkeys，提示element can't focus--解决方法

    在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...

  2. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

  3. 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  4. 【Winform-自定义控件】ImageButton 支持鼠标正常、悬停、按下更改图片，支持文本

    原文地址:https://www.codeproject.com/Articles/29010/WinForm-ImageButton 自定义winfrom图片按钮:支持鼠标正常.悬停.按下更改图片, ...

  5. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  6. Chrome下的语音控制框架MyVoix.js使用篇（四）

    在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...

  7. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  8. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  9. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

随机推荐

  1. c的旅程---字符

    输出菱形实验: /***************** 2017年四月十六. 第一个例子,输出菱形.就是找关系. 这是当n= 3时, * *** * ******************/ #inclu ...

  2. 2017河工大校赛补题CGH and 赛后小结

    网页设计课上实在无聊,便开始补题,发现比赛时候僵着的东西突然相通了不少 首先,"追妹"这题,两个队友讨论半天,分好多种情况最后放弃(可是我连题目都没看啊),今天看了之后试试是不是直 ...

  3. webrtc学习笔记1（建立连接基本流程）

    最近在做一个基于webrtc的视频软件,以下是自己对于上层建立通话连接流程的基本理解,记录于此. 假设A和B要建立视频通话,A为房间创建端,B为加入房间端: 1.A通过http登录.获取其他服务器地址 ...

  4. 简单几步让网站支持https，windows iis配置方式

    1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...

  5. smart beta

    本文来至人大经济论坛,http://bbs.pinggu.org/thread-3151691-1-1.html 众所周知,beta在CAPM模型中衡量了相对于持有整个市场所带来的风险溢价(risk ...

  6. PLSQL 配置设置

    1.登录后默认自动选中MyObjects 默认情况下,PLSQLDeveloper登录后,Brower里会选择Allobjects,如果你登录的用户是dba,要展开tables目录,正常情况都需要Wa ...

  7. 图论算法-Dijkstra

    原理 Dijkstra是一个神奇的最短路径算法,它的优点在于它可以稳定的时间内求出一张图从某点到另一点的距离.它的工作原理非常简单,思路类似于广搜.在搜索前,将每个点的颜色设为白色,第一次将源点Ins ...

  8. 基于django做HTTP代理服务器

    计算机网络的一次小实验,最后一共用了不到100行 实现了: a) 网站过滤:允许/不允许访问某些网站: b) 用户过滤:支持/不支持某些用户访问外部网站: c) 网站引导:将用户对某个网站的访问引导至 ...

  9. 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

    一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...

  10. Python数据类型之变量

    变量 在程序设计中,变数(英语:Variable,scalar)是指一个包含部分已知或未知数值或资讯(即一个值)之储存位址,以及相对应之符号名称(识别字).通常使用变数名称参照储存值:将名称和内容分开 ...