在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光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
随机推荐
- Python科学计算—numpy模块总结（1）
作为一个本科学数学专业,目前研究非线性物理领域的研究僧.用什么软件进行纯科学计算好,Fortran永远是第一位的:matlab虽然很强大,可以很容易的处理大量的大矩阵,但是求解我们的模型(有时可能是几 ...
- xmlplus 组件设计系列之八 - 分隔框（DividedBox）
分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则 ...
- js正则表达式详解
一.正则的两种写法: var re = /a/; //一般情况下都用简写的方式 性能好 var re = new RegExp('a'); //需要传入参数的时候用 二.转义字符: \n 换行 \r ...
- javascript ES3小测试
一.温故知新 做做题,总是能有温故知新的体验.这套题是2010年的了,比较老了, http://perfectionkills.com/ 还有一套http://perfectionkills.com ...
- 浅谈OA办公软件市场行情
3.原文:http://www.jiusi.net/detail/472__776__3999__1.html 关键词:oa系统,OA办公软件 浅谈OA办公软件市场行情 中国的OA办公软件市场历经20 ...
- Android Weekly Notes Issue #256
Android Weekly Issue #256 May 7th, 2017 Android Weekly Issue #256 本期内容包括: 一个给ViewPager切换时加动画的库; Tail ...
- routeProvider路由的使用
先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- 欲练JS，必先攻CSS——前端修行之路
今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+f ...
- Python函数之lambda,内置函数,yield生成器等
lambda 1,用于处理简单逻辑 2,自动返回数据(return) 单参数 >>> func2 = lambda a: a+1>>> result = func2 ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...