在chrome下鼠标拖动层变文本形状的问题
学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下鼠标拖动层变文本形状的问题的更多相关文章
- 在chrome下的文本框sendkeys，提示element can't focus--解决方法
在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...
- chrome下input文本框自动填充背景问题解决
chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...
- 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失
1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...
- 【Winform-自定义控件】ImageButton 支持鼠标正常、悬停、按下更改图片，支持文本
原文地址:https://www.codeproject.com/Articles/29010/WinForm-ImageButton 自定义winfrom图片按钮:支持鼠标正常.悬停.按下更改图片, ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Chrome下的语音控制框架MyVoix.js使用篇（四）
在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...
- jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
随机推荐
- C# 弱引用WeakReferance
在应用程序代码内实例化一个类或结构时,只要有代码引用它,就会形成强引用.例如,如果有一个类MyClass(),并创建一个变量MyClassVariable来引用该类的对象,那么只要在 MyClassV ...
- Visual Studio(VS) F12 查看DLL源代码
前言 我在VS中调试某个函数时,突发奇想"能不能使用VS的F12(转到定义)查看这个dll中当前函数的实现(源码),而不是像VS自带功能那样只能看到函数名和参数?" 回想起来在安装 ...
- Web性能优化工具WebPageTest（三）——本地部署（Windows 7版本）
这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...
- 0.0 ABP官方文档翻译目录
一直想学习ABP,但囿于工作比较忙,没有合适的契机,当然最重要的还是自己懒.不知不觉从毕业到参加工作七年了,没留下点儿什么,总感觉很遗憾,所以今天终于卯足劲鼓起勇气开始写博客.有些事能做的很好,但要跟 ...
- Android 正则表达式验证手机号、姓名（包含少数民族）、身份证号
最近项目中新增的功能,需要对手机号.姓名.身份证号等一些信息进行验证,最好的方法是通过正则表达式来验证,网上查了一些资料,写了这几个工具方法. 1.验证手机号 规则:第一位只能是1,第二位为3-8中的 ...
- .Net Core Session使用
Sessiong 添加程序集 Microsoft.AspNetCore.Session 在Startup.cs 的 ConfigureServices中添加Session中间件设置 // sessio ...
- Java AOP (2) runtime weaving 【Java 切面编程 (2) 运行时织入】
接上一篇 Java AOP (1) compile time weaving [Java 切面编程 (1) 编译期织入] Dynamic proxy 动态代理 Befor talking abou ...
- 设计模式的征途—6.建造者（Builder）模式
建造者模式又称为生成器模式,它是一种较为复杂.使用频率也相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品.因为,没有人买车会只买一个方向盘或者轮胎,大 ...
- hdu1556 Color the ball 简单线段树
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1556 简单的线段树的应用 直接贴代码了: 代码: #include<iostream> # ...
- sbt结合IDEA对Spark进行断点调试开发
笔者出于工作及学习的目的,经常与Spark源码打交道,也难免对Spark源码做修改及测试.本人一向讲究借助工具提升效率,开发Spark过程中也在摸索如何更加顺畅的对源码进行调试. Spark基于Sca ...