学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. Linux - atexit()(注册终止)函数

    进程终⽌的⽅式有8种,前5种为正常终⽌,后三种为异常终⽌: 1. 从main函数返回: 2 .调⽤exit函数:3 .调⽤_exit或_Exit:4 .最后⼀个线程从启动例程返回:5 .最后⼀个线程调 ...

  2. JS中字符串与数组的一些常用方法

    真是恨透了这些类似于substring substr slice 要么长得像,要么就功能相近的方法... 1⃣️string 1.substring(start开始位置的索引,end结束位置索引) 截 ...

  3. setTimeout 倒计时

    <script type="text/javascript"> //设定倒数秒数 var t = 10; //显示倒数秒数 function showTime(){ t ...

  4. node中创建服务进程

    背景 在node工程部署中,常常涉及到三方:本地客户端.跳板机和服务器(集群).在通过git触发gitlab hook脚本后,需要在跳板机中执行相应的ssh命令执行shell文件启动node服务器,这 ...

  5. 浅析如何在Nancy中使用Swagger生成API文档

    前言 上一篇博客介绍了使用Nancy框架内部的方法来创建了一个简单到不能再简单的Document.但是还有许许多多的不足. 为了能稍微完善一下这个Document,这篇引用了当前流行的Swagger, ...

  6. AutoFac学习摘要

    依赖注入(控制反转)常见的依赖注入工具:AutoFac,Spring.Net,Unity等依赖注入的方式:1.通过构造函数进行注入2.通过属性进行注入 注意:在项目中AutoFac的注入有两次,第一次 ...

  7. 工厂模式(Factory)和抽象工厂模式(Abstract Factory)

    一.工厂模式(Factory):通过让子类决定该创建的对象是什么,来达到将对象创建的过程封装的目的,工厂方法让类的实例化推迟到子类 (1)涉及角色:抽象产品,具体产品,抽象创建者,具体创建者.     ...

  8. Java7中的ForkJoin并发框架初探(上)——需求背景和设计原理

    原文:发表于 2013 年 8 月 26 日 由 三石 0. 处理器发展和需求背景 回想一下并发开发的初衷,其实可以说是有两点,或者说可以从两个方面看. 对于单核的处理器来说,在进行IO操作等比较费时 ...

  9. mongodb新手扫盲

    前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 查询数据 mongoose的使用 前言 mongodb是什么?, 需fq 如何安装mongodb? 数据库基本命令 显示所有数据库: ...

  10. 导入csv文件到数据库

    csv:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本意味着该文件是一个字符 ...