js下关于onmouseout、事件冒泡的问题经验小结

问题是这样的：一个div元素要触发onmouseout事件，同时这个div内部还有子元素，于是当鼠标移动到该div的子元素上时，onmouseout事件也被触发了。在要做浮动层效果的时候会经常遇到这个问题。
解决方法一：
使用jQuery，这个大家都会的：


代码如下:

<div id="div1">触发显示浮动层</div>
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
$("#div1").mouseover(function(){
$("#div2").show();
$("#div2").bind("mouseleave",function(){
$(this).hide();
});//此句需要写在触发浮动层的函数内
};);
</script>

解决办法二：
利用onmousemove事件优先的办法，来防止在子元素中触发onmouseout：


代码如下:

<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">触发显示浮动层</div>
<div id="div2" onmousemove='this.style.display="";' onmouseout='this.style.display="none";'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

赞 (0)

相关推荐

  • js 阻止子元素响应父元素的onmouseout事件具体实现

    复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });

  • 通过onmouseover选项卡实现img图片的变化

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS小功能(onmouseover实现选择月份)实例代码

    JS小功能(onmouseover实现选择月份)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #backcolor        {            width: 400px;            height: 400px;            background: #FFFF00;            tex

  • onmouseover和onmouseout的一些问题思考

    onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • js ondocumentready onmouseover onclick onmouseout 样式

    复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q

  • onmouseover事件和onmouseout事件全面理解

    onmouseover事件和onmouseout事件全面理解

    这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢? 首先实现一个盒子: 给这个盒子上绑定上onmouseover事件和onmouseout事件 发现它们不会发生什么问题,然后(嘿嘿,你懂得!) 让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素 我们依旧只给外层父元素A绑定onm

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

  • 浅析js中事件冒泡与事件捕获

    目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响 与 阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍 本小节知识点:介绍什么是事件冒泡 事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发 元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO

  • JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • JS中事件冒泡和事件捕获介绍

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 1.冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.通俗来讲就是,就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件

  • 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场).工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗).今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了. 先上结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件

  • JS阻止事件冒泡行为和闭包的方法

    阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 <body onclick='load()'> <div onclick='cli()'> click this </div> </body> css代码 div{ width:200px; height:200px; border:1px red solid; } js代码 function load(){ console.log('body') } function

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • js之事件冒泡和事件捕获详细介绍

    js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开

  • JS 事件冒泡 示例代码

    JS中的事件冒泡 table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为 event.cancelBubble=true; } // --> 目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD AAA BBB [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

随机推荐