html判断坐标,js判断鼠标位置是否在某个div中的方法

本文实例讲述了js判断鼠标位置是否在某个div中的方法。分享给大家供大家参考,具体如下:

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了。解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。

就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了。

div.οnmοuseοut=function(event){

var div = document.getElementById("test");

var x=event.clientX;

var y=event.clientY;

var divx1 = div.offsetLeft;

var divy1 = div.offsetTop;

var divx2 = div.offsetLeft + div.offsetWidth;

var divy2 = div.offsetTop + div.offsetHeight;

if( x < divx1 || x > divx2 || y < divy1 || y > divy2){

//如果离开,则执行。。

}

后面为一些常用属性方便查找:

clientHeight     获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。

clientLeft     获取    offsetLeft     属性和客户区域的实际左边之间的距离。

clientTop     获取    offsetTop     属性和客户区域的实际顶端之间的距离。

clientWidth     获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。

offsetHeight     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的高度。

offsetLeft     获取对象相对于版面或由    offsetParent     属性指定的父坐标的计算左侧位置。

offsetParent     获取定义对象    offsetTop     和    offsetLeft     属性的容器对象的引用。

offsetTop     获取对象相对于版面或由    offsetTop     属性指定的父坐标的计算顶端位置。

offsetWidth     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的宽度。

offsetX     设置或获取鼠标指针位置相对于触发事件的对象的    x     坐标。

offsetY     设置或获取鼠标指针位置相对于触发事件的对象的    y     坐标。

clientX,clientY   鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0

screenX, screenY是相对于用户显示器的位置

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth    (包括边线的宽)

网页可见区域高: document.body.offsetHeight   (包括边线的宽)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

希望本文所述对大家JavaScript程序设计有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Busybox 制作文件系统并用 Qemu 启动编译的内核镜像

编译内核操作&#xff1a;https://blog.csdn.net/assiduous_me/article/details/120938556安装Busybox操作&#xff1a;https://blog.csdn.net/assiduous_me/article/details/120939319syzDESKTOP-B10G93S:~$ ls -l total 20 drwxr-xr-x 44 syz syz 4096 Oct 26 22:05 busybox …

深入浅出Win32多线程程序设计之线程通信

简介  线程之间通信的两个基本问题是互斥和同步。  线程同步是指线程之间所具有的一种制约关系&#xff0c;一个线程的执行依赖另一个线程的消息&#xff0c;当它没有得到另一个线程的消息时应等待&#xff0c;直到消息到达时才被唤醒。  线程互斥是指对于共享的操作系统…

Kafka Producer源码简述

接着上文kafka的简述&#xff0c;这一章我们一探kafka生产者是如何发送消息到消息服务器的。 代码的入口还是从 kafkaTemplate.send开始 最终我们就会到 org.springframework.kafka.core.KafkaTemplate#doSend方法 这里的关键就是 org.apache.kafka.clients.producer.Producer#…

原来搞单片机也可以面向对象

摘要&#xff1a;在看别人单片机程序时&#xff0c;你也许是奔溃的&#xff0c;因为全局变量满天飞&#xff0c;不知道哪个在哪用了&#xff0c;哪个表示什么&#xff0c;而且编写极其不规范。自己写单片机程序时&#xff0c;也许你也是奔溃的。总感觉重新开启一个项目&#xf…

Cs代码写在html页面哪里,当用于在details.cshtml页面上查看时,我用什么代码来查看模型中的项目列表?...

我正在尝试查看销售订单中的产品列表。它看起来像这样&#xff1a;名称OrderDate OrderTotal Products购买<<被带来的产品。销售订单连接到SalesorderProduct的桥接表。有什么建议。我知道它想要遍历模型&#xff0c;但无法弄明白。Html.DisplayFor(model > model.Cus…

雅虎年底升级IPv6标准 100万用户恐受影响

雅虎年底升级IPv6标准 100万用户恐受影响 http://network.51cto.com 2011-01-20 17:34 佚名 cnBeta 我要评论(0) 据国外媒体报道&#xff0c;雅虎计划今年年底将主站点Yahoo.com升级为IPv6标准&#xff0c;此举可能会使约100万用户在初期无法访问雅虎站点。据国外媒体报道&…

Linux v4l2框架分析

背景说明&#xff1a;Kernel版本&#xff1a;4.14ARM64处理器&#xff0c;Contex-A53&#xff0c;双核使用工具&#xff1a;Source Insight 3.5&#xff0c; Visio1. 概述V4L2(Video for Linux 2)&#xff1a;Linux内核中关于视频设备驱动的框架&#xff0c;对上向应用层提供统…

JAVA自学笔记23

JAVA自学笔记23 1、多线程 1&#xff09;引入&#xff1a; 2&#xff09;进程 是正在运行的程序。是系统进行资源分配和调用的独立单位。每一个进程都有它自己的内存空间和系统资源。 多进程&#xff1a; 单进程的计算机只能做一件事情&#xff0c;而现在的计算机都可以做…

20110126 学习记录:一些关于html中布局的代码 CSS hack速查表

让你的浏览器body滚动条在左边 direction: rtl;HTML段落两端对齐代码text-align:justify; text-justify:inter-ideograph; 图片垂直居中的使用技巧“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意&#xff0c;而…

html如何实现切换效果,纯CSS实现页签切换效果

主要运用了 CSS3 的 :checked 选择器&#xff0c;代码结构跟使用js差不多&#xff0c;只是多了几个radio&#xff0c;不知道性能上是js快还是css快呢&#xff1f;CSS3 TABbody {font-family: Microsoft YaHei;font-size: 14px;background-color: #f5f4f7;margin: 0;color: #252…

上午写了一段代码,下午就被开除了~

俗话说得好&#xff0c;“代码写的少&#xff0c;离职少不了”。最近畅游互联网&#xff0c;发现一些离职小技巧&#xff0c;读后&#xff0c;内心被深深地打动了……但是&#xff0c;细细品过之后&#xff0c;发现对我们程序员不太适用了。例如&#xff1a;领导夹菜你转桌&…

nginx加载html目录下图片,nginx配置访问图片路径以及html静态页面的调取方法

nginx配置访问图片路径以及html静态页面的调取方法发布时间&#xff1a;2017-03-09 12:06来源&#xff1a;互联网当前栏目&#xff1a;web技术类给大家讲一个快速配置nginx访问图片地址&#xff0c;以及访问html静态页面的配置。1.实验环境首先随便某个路径下创建相应的目录。如…

一些Select检索高级用法

信息来源: 邪恶八进制信息安全团队 SQL五个集合函数&#xff1a;SUM,AVG,COUNT,MAX,MIN 通配符的一些用法&#xff1a;(关键字&#xff1a;like % [] -)select * from tablename where column1 like [A-M]%这样可以选择出column字段中首字母在A-M之间的记录select * from table…

这5个bug我不信你没有写过

大家好&#xff0c;我是写代码的篮球。计算机专业的小伙伴&#xff0c;在学校期间一定学过 C 语言。它是众多高级语言的鼻祖&#xff0c;深入学习这门语言会对计算机原理、操作系统、内存管理等等底层相关的知识会有更深入的了解&#xff0c;所以我在直播的时候&#xff0c;多次…

微信小程序继续入坑指南

微信小程序继续入坑指南 wxml 类似于html 感觉和ejs灰常的相似 数据绑定 js Page({data: {message: "hello world"} })wxml <view>{{message}}</view> 使用的是https://mustache.github.io/模板引擎系统 对组件的属性和控制属性的更改 <view id"…

思科收购网络安全管理厂商Pari Networks

思科收购网络安全管理厂商Pari Networkshttp://netsecurity.51cto.com 2011-01-28 09:39 胡杨 译 网界网 我要评论(0)摘要&#xff1a;思科本星期宣布&#xff0c;它打算收购私营企业Pari Networks。这个企业是前思科工程师创建的&#xff0c;主要提供网络配置、变更和合规…

20年软件工程师的经验

软件工程师在做设计的时候&#xff0c;一定要有设计的思维&#xff0c;码农如果只是砌砖的&#xff0c;那么他的可替代性和技能能力并不高。前段时间看到一个设计师傅&#xff0c;在很狭小的空间内设计了非常非常不错的室内设计&#xff0c;利用了每一个可以利用的地方。如果我…

html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市

介绍原文链接感謝 comehope 大佬的 [前端每日实战]效果预览源代码地址代码解读1. html 结构命名规则使用了 BEM常规样式初始化* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;overflow: hidden;}2. 街道背景街道背景分为两部分深蓝色的天空.street {hei…

继续努力奋斗,生活会更美好

回想起2010年&#xff0c;有点留恋&#xff0c;又有点让我伤感。 在北京这么长时间了&#xff0c;也该有段难忘的事啊&#xff01; 人们都说现时很残酷&#xff0c;才发现我的感觉是错的。现时让我很无奈。 现在不是以前。要做现在的自己。 做自己所想的&#xff0c;想自己所做…

送30块树莓派PICO 开发板!

大家好&#xff0c;今天是周日&#xff0c;给大家搞个小抽奖&#xff0c;送30块。嵌入式猛男必备&#xff0c;学嵌入式看『我要学嵌入式』&#xff0c;知识持久有力。点击关注&#xff0c;回复【1031】参与抽奖&#xff0c;免费送 10块 树莓派最新PICO开发板。学C语言看『写代码…