清除子元素继承父元素鼠标移入移出事件

function contains(parentNode, childNode) {
        if (parentNode.contains) {
            return parentNode != childNode && parentNode.contains(childNode);
        } else {
            return !!(parentNode.compareDocumentPosition(childNode) & 16);
        }
    }

    function checkHover(e,target){
        if (getEvent(e).type=="mouseover")  {
            return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
        } else {
            return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
        }
    }function getEvent(e){
        return e||window.event;
    }
 

使用方法:$("a").bind("mouserover",function(){

  if(!checkHover(e,this))return;

});

原文出处我忘记了,反正是博客园里的一位大牛。。

时间: 2024-12-23 22:59:54

清除子元素继承父元素鼠标移入移出事件的相关文章

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

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

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

认清鼠标移入移出事件

本文也同步发表在我的公众号"我的天空" 鼠标的移入移出事件,是在我们做一些前端效果时使用相当频繁的事件,但在JS中,鼠标的移入移出事件有两对,分别是mouseover.mouseout:以及mouseenter.mouseleave,如果没有对其的区别有清新的认识话,则很容易掉坑里! 譬如某次有人反映需要做以下这么一个效果:当鼠标移入背景图片时,将有一个遮罩层升起,当鼠标移出后,遮罩层落下(如图),该效果还是很常见的: 其采用jquery的animate()结合鼠标的移入移出事件来处理

子元素继承父元素透明度问题。

在写CSS的发现,将父元素的opacity设置为0.5之后,子元素一定会继承这个属性,且对子元素单独设置opacity,也无效. 1 #texts{ 2 height: 30px; 3 width:380px; 4 background: #000000; 5 position: absolute; 6 top: 270px; 7 color: #FFFFFF; 8 z-index: 997; 9 font-size: 12px; 10 opacity: 0.5; 11 } 12 .textRi

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各 种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装好布局的模板和控件,归根结底,还是那几个布局控件: Grid,StackPanel,Canvas,Pivot..... 所以,分歧就来了,对于追求视觉上冲击和美观的程序员来说,虽说要秉承微软的大块布局,内容为先的策略,但是 依旧不喜欢微软的那些既定的模板,所以解决方案就有两个. 一:创建项目时依旧用那些

Javascript禁止子元素继承父元素的事件

3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3.简单点,直接在子元素事件function最后加return false:// 阻止事件冒泡和默认操作

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

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;

阻止子元素继承父元素事件

转载的,作者不详.此方法实际上是阻止子元素事件冒泡,达到类似效果. 想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码,具体实现祥看本文 <div id="p_box" onclick="a()"> <div id=p_cont> </div> </div> #p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件.想要阻止点击#p