如何判断鼠标有没有在div范围内

2024-11-02

js判断鼠标位置是否在某个div中

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了. [javascript] view plaincopyprint? d

js用斜率判断鼠标进入div的四个方向

网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左上角做原点,水平轴作为x轴,往右为正:竖直轴作为y轴,向上为正. 中间的div的左上角坐标(x1,y1),右下角坐标(x2,y2),中心点的坐标(x0,y0). 设如图两点的斜率为k(k<0),关于x轴对称的斜率为-k. 另外鼠标刚移入时,鼠标的坐标设为(x,y): window.onload =

JS用斜率判断鼠标进入DIV四个方向的方法判断鼠标移入方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html

JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

1.鼠标进入容器方向的判定判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on("

js判断鼠标是否停止移动

本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0:timer可以实现每过n秒就判断鼠标状态,然后把imouse重置为0: 2.div监听onmouseover.当鼠标进入区域时,就设置定时器: 3.div监听onmousemove.当鼠标移动时,设置imouse值为1: 4.div监听onmouseout.当鼠标离开时,清除定时器timer <ht

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

<div id="Jnav"> <ul class="nav"> <li><a href="#">WEB前端开发</a></li> <li><a href="#">前端开发博客</a></li> <li><a href="#">前端开发</a></

JS判断鼠标移入元素的方向

最终效果这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

JS判断鼠标从什么方向进入一个容器

偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方法,是基于jquery的,原文地址说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了.

canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,进行相应的操作. isPointInPath() 方法是针对的当前绘制的路径,而鼠标在执行操作的时候,我们会根据需要监听鼠标的

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

今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>判断鼠标移入移出方向</title> <style type="text/css">

2015.10.11（js判断鼠标进入容器的方向）

判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想到了鼠标从不同方向进入容器的想法.其中涉及到Math.atan2(y,x)等圆心事件,在研究其代码时对一些代码不是很理解,现在写下来,作为自己的一份学习笔记. Math.atan2(y,x)注意:该函数的参数顺序,第一个参数是y坐标,第二个参数是x坐标,这与我们平常的写法(x, y)恰好相反. 返回

JS实现穿墙效果(判断鼠标划入划出的方向)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>判断鼠标移入移出方向</title> <style type="text/css"> * { margin: 0; padding: 0; } .outer { width: 400px; height: 400px; bor

JS如何判断鼠标滚轮向上还是向下滚动

前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索思路:通过event对象里wheelDelta和detail值的正负来判断鼠标滚轮向上还是向下,示例代码如下 Demo <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>JS

Matlab判断鼠标移动

set(gcf,'WindowButtonMotionFcn',@get_cur_positon); 其中第二项是判断鼠标移动的属性参数,第三项为回调函数 et. main.m clear;clc;setptr(gcf,'modifiedfleur');set(gcf,'WindowButtonMotionFcn',@get_cur_positon); function get_cur_positon function get_cur_positon(~,~) pt = get(gca,'Cur

js判断鼠标进入以及离开容器的方向

(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题如图当鼠标右箭头位置上下移动的时候下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法(当然该方法不但是针对此情况的),采用判断鼠标溢出的方位来响应事件. 具体如下: $(".where").bind("mouseenter mouseleave",function(e) { var w = $(this).width(); var h = $(this

javaScript判断鼠标滚轮的上下滚动

分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 alert("滑轮向上滚动"); } if (e.wheelDelta < 0) {

JavaScript判断鼠标滑轮是向下还是向上滚动

我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaScript判断鼠标滑轮是向下还是向上滚动,这样有利于我们更加精确的控制滑轮的操作,比如上下滑动改变文本框的数字,向上就是增加,向下就是减少,很实用的功能. 首先,不得不说一下,因为不同的浏览器有不同的滚轮事件.主要是有两种: onmousewheel(firefox不支持)和DOMMouseScro

使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动

使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放开:document 的 onmouseup 元素. 一.思路 1.当使用点击要拖动的 DIV 时,要首先计算出鼠标的位置与元素位置的差值: 1.1.X坐标的差值 = 鼠标当前位置的X坐标 - DIV元素的X坐标(即:左偏移量) 1.2.Y坐标的差值 = 鼠标当前位置的Y坐标 - DIV元素的Y坐标

Unity3D 判断鼠标是否按在UGUI上

判断鼠标是否点击在UGUI上 #if UNITY_ANDROID && !UNITY_EDITOR #define ANDROID #endif #if UNITY_IPHONE && !UNITY_EDITOR #define IPHONE #endif using UnityEngine; using UnityEngine.UI; using System.Collections; using UnityEngine.EventSystems; public clas

JS判断鼠标向上滚动还是向下滚动

js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动,简要分享. 首先,不得不说一下,因为不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(m

如何判断鼠标有没有在div范围内

热门专题