在JQuery中,我们可以利用mousedown、mouseup来跟踪页面的鼠标按下与释放事件。

如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位置信息,相当于数学坐标系中的xy坐标那样。

于是我们可以先用一个全局变量来记录鼠标按下的位置信息,再在鼠标释放的函数里判断按下的位置与释放的位置是否一致,再根据结果做操作。

示例代码如下:

    var x,y;
$(document).mousedown(function(event){ //获取鼠标按下的位置
x = event.pageX;
y = event.pageY;
});
$(document).mouseup(function(event){//鼠标释放
var newX = event.pageX;
var newY = event.pageY;
if(x==newX && y==newY){
//位置相同的操作
}
else{
//位置不同的操作
}
})

JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同的更多相关文章

  1. 原生态js,鼠标按下后,经过了那些单元格

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑 ...

  2. C#WinForm无边框窗体移动方法、模仿鼠标单击标题栏移动窗体位置

    C#WinForm无边框窗体移动方法.模仿鼠标单击标题栏移动窗体位置 这里介绍俩种办法 方法一:直接通过修改窗体位置从而达到移动窗体的效果 方法二:直接伪装发送单击任务栏消息,让应用程序误以为单击任务 ...

  3. C#WinForm无边框窗体移动----模仿鼠标单击标题栏移动窗体位置

    C#WinForm无边框窗体移动方法.模仿鼠标单击标题栏移动窗体位置 这里介绍俩种办法 方法一:直接通过修改窗体位置从而达到移动窗体的效果 方法二:直接伪装发送单击任务栏消息,让应用程序误以为单击任务 ...

  4. jQuery插件,判断鼠标的移入移出方向

    今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...

  5. jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  6. JavaScript区分click事件和mousedown(mouseup、mousemove)方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  7. click事件和mousedown、mouseup事件

    点击select标签元素的时候,会弹出下拉.然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好). 首先 ...

  8. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  9. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

随机推荐

  1. IntelliJ Idea和IntelliJ webstrm 常用快捷键

    Ctrl+Shift + Enter,语句完成"!",否定完成,输入表达式时按 "!"键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shif ...

  2. PHP语言开发微信公众平台(订阅号)之curl命令

    在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...

  3. Fundebug上线Node.js错误监控啦

    作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...

  4. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  5. Python总的字符串

    Python总最常用的类型,使用单引号双引号表示.三引号之间的字符串可以跨多行并且可以是原样输出的. Python中不支持字符类型,字符也是字符串. ---字符串的CRUD [1:3] [:6] -- ...

  6. (18)IO流之字节缓冲路

    缓冲流 BufferedInputStream 缓冲输入流 前面的练习告诉我们使用缓冲数组读取的效率更高,为了方便的大家的操作,sun 位大家提供了一个缓冲输入字节流对象,让我们可以更高效率的读取文件 ...

  7. DLL:无法解析的外部符号 "__declspec(dllimport)

    (4.10)碰到问题:MFC规则DLL(静态库1)中,AFX_EXT_CLASS导出类及类的对象.在静态库2中使用.出现两个问题:  (1) 静态库1中警告:dll链接不一致;  (2) 静态库2中报 ...

  8. 一步到位Linux中安装配置MySQL及补坑

    Windows上安装MySQL也就不讲了,基本上一路点击下一步就可完成,现在讲讲Linux上布署Mysql,虽然也有很多网友列出了详细的步骤,可能是因为版本过老的问题导致即使按照上面一步步来也还是出现 ...

  9. response.setHeader("Content-disposition","attachment;filename="+fileName) 下载时文件名中存在空格错误

    最近在进行文件下载时发现一个问题,就是下面语句运行时,下载某些文件正常,下载某些文件异常,后来发现文件名中有空格的文件火狐浏览器是默认将文件名截断了的 response.setHeader(" ...

  10. XJOI练习2神奇的供水系统

    神奇的供水系统 在游遍神秘岛过程中,Z4发现每一个小岛上都有若干个奇怪的类似小水缸似的立方体,这另到Z4相当迷惑不解!这天晚上,忽然下起了一场大雨,在中心岛小树屋上类似那个圆形石槽中间的小孔中涌出了一 ...