在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. java中的对象

    对象                     --计算机语言中的对象 通常,我们可以从一般事物的三个方面,去认识事物: 一.是什么? 二.为什么? 三.怎么样? 接下来,我们也利用这三个方面的思维,去 ...

  2. Linux运行级别简介

    init 0 : 关机 init 1 : 单用户模式  root init 2 : 多用户模式 不能使用 net file system init 3 : 完全多用户模式 init 4 : 多用户的安 ...

  3. 实现类似MVC ViewBag类型的对象

    public class ViewBag : DynamicObject { private readonly Dictionary<string,dynamic> dic=new Dic ...

  4. java与xml之间的转换(jaxb)

    使用java提供的JAXB来实现java到xml之间的转换,先创建两个持久化的类(Student和Classroom): Classroom: package com.model; public cl ...

  5. 微信小程序已经开放个人开发者申请了,还不快上车?

    前言 就在昨天(3月27号),微信公众号平台推送了文章"小程序新能力",这篇文章是广大开发者的福音.个人开发者可申请小程序!!! 小程序开放个人开发者申请注册,个人用户可访问微信公 ...

  6. PRINCE2的发展情况是什么样

    英国皇家特许培训机构AXELOS近期公布了一份调查结果,调查共有172位项目经理参与,其结果展示了未来全球趋势,对项目经理未来的职业形态和对他们必备技能的影响.  未来的项目管理职业  调查结果同时给 ...

  7. 在hive中直接对timestamp类型取max报错

    之前直接对timestamp类型做max操作, select id,max(updatetime) updatetime from his.tag group by id; 结果查询的结果有的显示为1 ...

  8. Unix文件 I/O(不带缓冲区的)上

    简介 Unix系统大多数文件i/o只需要:open.read.write.lseek.close这几个函数.但是某些时候我们也需要fcntl.ioctl.sync等函数配合使用.这些函数都是不带缓冲区 ...

  9. 重新认识JavaScript里的创建对象(一)

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为"无序属性的集合,其属性可以包含基本值.对象或者函数&quo ...

  10. Java 中的 String 类常用方法

    字符串广泛应用在Java编程中,在Java中字符串属于对象,String 类提供了许多用来处理字符串的方法,例如,获取字符串长度.对字符串进行截取.将字符串转换为大写或小写.字符串分割等. Strin ...