js 鼠标移出事件受子标签影响

2024-10-17

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级): 2.当鼠标从子集移出到父级时又触发了父级的两个事件:a.由于事件冒泡影响,父级触发了mouseout事件(父级移出父级):b.再触发了父级的mouseover事件(子集移入父级) 注:红色字体的解释是事件冒泡的奇妙之处. 二.解决方法: 首先必须先熟悉以下两个方法和一个事件属性: a,b为节点

第十五篇 JS 移入移出事件模拟一个二级菜单

JS 移入移出事件模拟一个二级菜单老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

JS鼠标滚动事件

-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件并且还考虑到了各浏览器的兼容---------------------------------------------------- //鼠标滚动事件 var scrollFunc=function(e){ //获取函数代码 e=e || window.event; //判断浏览器兼容哪个方法 if(e.wheelDelta)//IE/Opera/Chrome alert("监听成功!"

（转载）VB6之鼠标移出事件

转载链接:http://www.ltesting.net/ceshi/ruanjianceshikaifajishu/rjcskfyy/vb/2007/0525/3426.html Windows提供的鼠标移出消息有时候很有用,但是VB6中没有把这个事件封装给我们.但是我们仍然可以使用子类化技术实现他,下面的代码就是一个简单的例子来处理Windows的WM_MOUSELEAVE消息的,我演示的是鼠标移出一个Button时的情形. 1.加入一个模块,专门用来处理子类函数: Option Expli

JS鼠标滚轮事件解析

一.不同浏览器的鼠标滚轮事件首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有firefox支持) 另外在操作的过程中需要添加事件监听,兼容性写法代码如下: /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C

js鼠标滚轮事件

不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; console.dir(event); }; //firefox document.body.addEventListener("DOMMouseScroll", function(event) { console.dir(event); }); 更详细的鼠标滚轮事件请参考 1 http:/

JS鼠标滚轮事件详解

鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function whe

js鼠标滚轮事件兼容

JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数浏览器支持mousewheel事件操作,它可以在任何元素上触发,最终冒泡到document或window对象:而在Firefox中,支持的是另外一种事件--DOMMouseScroll,其中最为特殊的是它必须用addEventListener方法实现,故一般进行如下处理 //设触发的函数为fn if

JS鼠标响应事件经过、移动、点击示例介绍

原文: http://www.jb51.net/article/41124.htm onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触

JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) { event = event || window.event; console.dir(event); }; DOMMouseScroll(FireFox独有事件) // Firefox document.body.addEventListener("DOMMouseScroll", f

JS鼠标滑轮事件的写法和按键的事件

在body注册一下滑轮事件 <body onload="win_onload();"></body> 然后JS代码如下: function win_onload() { ////注册按键事件 //document.onkeydown = keydown; /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//

几个常用的JS鼠标键盘事件例子

首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴 2.event.y 鼠标纵轴 3.event.keycode 键盘值 4.events.button==0 默认.没有按任何按钮. 5.events.button==1 鼠标左键 6.events.button==2 鼠标右键 7.events.button==3 鼠标左右键同时按下 8.events.button==4 鼠标中键 9.events.button==5 鼠标左键和中键同时按下 10.events

cocos2d JS 鼠标响应事件

对于PC和超级本,添加鼠标事件的的处理,可以加强用户的体验,其处理逻辑与触摸事件基本一样,多了一些鼠标特有的事件响应如滚轮事件(onMouseScroll) cc.eventManager.addListener({ event: cc.EventListener.MOUSE, onMouseMove: function(event){ var str = "MousePosition X: " + event.getLocationX() + " Y:" + e

js鼠标触发事件集合

转载自:http://blog.sina.com.cn/s/blog_627002d101010yb7.html 事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4

js鼠标相关事件

js鼠标滚轮事件上滚下滚判断

onmousewheel <script> var scrollFunc = function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 //然后通过观察看他里面的变量哪个再上滚下滚时候不同 //可以通过这传入值e.deltaY的正负来判断 //deltaY大于0为下滚,deltaY小于0为上滚 } window.onmousewheel =scrollFunc </script>

JS添加、设置属性以及鼠标移入移出事件

源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; } #wk{ width:100px; } .pname{ width: 100px; height: 50px; line-height: 50p

[JS]鼠标事件穿透的问题

今天制作登陆窗口的效果时碰到的一个问题,如下: 标签结构如下: <div id="loginFrame"> <form class="loginFrame-top" method="POST" action="#"> <h3>商户卖家登陆</h3> <h6>请使用卖家账户可登录后进入店铺或申请开店</h6> <dl> <dt><

VB6/VBA中跟踪鼠标移出窗体控件事件(类模块成员函数指针CHooker类应用)

一.关于起因前几天发了一篇博文,是关于获取VB类模块成员函数指针的内容(http://www.cnblogs.com/alexywt/p/5880993.html):今天我就发一下我的应用实例. VB中默认是没有鼠标移出事件响应的,而这个事件其实在项目开发中,实用性很强,很多时候需要在鼠标移出窗体或控件时做些事情:没有这个事件会感觉很费力: 今天我所说的实际案例就是,在窗体上,设计一个SplitterBar控件,窗体的最终用户使用这个控件可以在运行程序时任意调整其内部控件大小. 二.修改CHo

js回顾（DOM中标签的CRUD，表格等）

01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 04-新闻字体 05-表格增删 06-动态生成表格 07-表格隔行变色 08-左到右右到左(将左边的标签移动到右边) 09-二级联动 01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 <script type="text/javascript"> function $(_id) { return document.getElementById(_id); } windo

JS 操作对象事件样式

1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementById('id'): - 获取一个对象 + document.getElementsByClassName('class'); - 获取的是一个数组 + document.getElementsByTagName('标记'); - 获取的也是一个数组 <input type="button&qu

js 鼠标移出事件受子标签影响

热门专题