在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光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
随机推荐
- js中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
- JS+html--实现图片轮播
大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...
- 《分布式Java应用之基础与实践》读书笔记二
远程调用方式就是尽可能地使系统间的通信和系统内一样,让使用者感觉调用远程同调用本地一样,但其实没没有办法做到完全透明,例如由于远程调用带来的网络问题.超时问题.序列化/反序列化问题.调式复杂的问题等. ...
- AIX误删除LV后如何进行现场保护和数据恢复工作
在AIX环境下,若因维护误操作.存储mapping错误等,不小心将LV误删除,这种损失通常是巨大的.删除后的不当保护及恢复操作可能使数据无法恢复,也可能增加处理的时间与算法复杂度.如何有效保护现场,并 ...
- ZJOI2017 Round#2 滚粗记
在杭州的火车站的KFC餐厅里,独自一人,闲来无事,便写写这篇博客.刚刚的一个礼拜,经历了余姚的省选和杭州的数学集训,感觉有些浪,学校里现在还在上新课,我已经落下一个礼拜的文化课了,回去估计补死:最重要 ...
- TP5.0 PHPExcel 数据表格导出(原)
今天看的是PHPExcel这个扩展库,Comporse 下载不下来,最后只能自己去github里面手动下载,但有一个问题就是下载下来的PHPExcel没有命名空间,所以框架里面的use根本引入不进去, ...
- 【css笔记(2)】如何给元素应用规则?
css选择器 在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link ...
- Oracle正则表达式之匹配邮箱
利于正则表达式匹配出符合电子邮箱的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into test ...
- Oracle的正则应用之匹配出手机号
按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...
- XSS攻击及预防
跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web页面里插 ...