onmouseout与mouseout（div内嵌div时，onmouseover和onmouseout响应问题）

本文目录

• div内嵌div时，onmouseover和onmouseout响应问题
• Dreamweaver里面做鼠标mouseOver和mouseOut情况
• 关于onMouseout
• 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
• jquery用onmouseout和onmouseover怎么改变span或div中的文字的颜色，大小，粗体，字
• JavaScript中mouseout函数一般位置
• 求一段代码，鼠标触发事件，onmouseover和onmouseout，触发一个div显示和隐藏

div内嵌div时，onmouseover和onmouseout响应问题

《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》无标题文档《/title》《style》
《/style》
《script src="jquery.js" type="text/javascript"》《/script》
《script type="text/javascript"》
$(document).ready(function(e) {
    $(".frame").on({
mouseover:function(){
$("#text").text("frame");
},
mouseout:function(){
$("#text").empty();
}
});
    $(".in").on({
mouseover:function(e){
        //用e.stopPropagation()防止冒泡
e.stopPropagation()
$("#text").text("in");
},
mouseout:function(){
$("#text").empty();
}
});
});
《/script》
《/head》
《body》
《div class=’frame’ style="width: 200px;height:200px; background:#F60"》
《div class="in"  style="width: 100px;height:100px;margin: auto;background:#06F"》
    
《/div》
《/div》
《div id="text"》《/div》
《/body》
《/html》

我用JQ写法给你举个例子吧，主要就在e.stopPropagation()

Dreamweaver里面做鼠标mouseOver和mouseOut情况

function f2(){
as.style.backgroundImage=’url(../img/3.gif)’
}
《div class="as" id="as" onMouseOver="f2()" // // 用函数来做可以
onMouseout="this.style.backgroundImage=’url(../img/0011.jpg)’"》《/div》 // // 直接在里面也行
// // 直接在《div ????》《/div》标签里面做,,就不用定义它的 Id="??"
《div class="as1" name="b2" 》《/div》

关于onMouseout

方法1:
把《select/》放在《span/》内, 布局样式时,《span/》和《select/》要无缝连接, 如果你的《span/》背景是空的, 恭喜你, 只要鼠标一离开文字, 就会触发 mouseout, 最好用图片或背景色把《span/》填满...《select/》显示时,刚好在《span/》的边沿, 鼠标一移出《span/》就是《select/》, 因为《select/》是在《span/》内的, 所以还保持着《span/》的 mouseover 状态.
方法2:
鼠标移出时使用时间延时
《span id="b" onmouseout="var iTO = setTimeOut(remove(’b’),500);"》
《select/》要添加mouseover 和 mouseout处理:
《select onmouseover="clearTimeOut(iTO);" onmouseout="remove(’b’)" 》《/select》
该方法,《select/》可随便放, 只要鼠标离开《span/》 0.5秒内(500ms) 移到《select/》, 就不会触发 remove(’b’)
请参考

如何防止鼠标移出移入子元素触发mouseout和mouseover事件

如何防止鼠标移出移入子元素触发mouseout和mouseover事件:
关于mouseout和mouseover事件这里就不多介绍了，具体可以参阅javascript的mouseout和mouseover事件详解一章节。
这两个事件有一个共同特点，那就是当鼠标移入或者移出子元素的时候都会触发对应的事件，这个往往在实际应用中是不需要的，或者说能够带来很大的困扰，下面就通过实例代码介绍一下如何避免此影响。
代码实例如下:
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
***隐藏网址***
《title》蚂蚁部落《/title》
《style type="text/css"》
#box{
width:200px;
height:200px;
background-color:red;
padding:50px;
}
#inner{
width:50px;
height:50px;
background-color:blue;
}
《/style》
《script type="text/javascript"》
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type==’mouseout’?e.toElement:e.fromElement;
while (reltg && reltg != handler){
reltg = reltg.parentNode;
}
return (reltg != handler);
}
window.onload=function(){
var box=document.getElementById("box");
var num=document.getElementById("num");
var count=0;
box.onmouseout=function(ev){
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,box)){
return false;
}
num.innerHTML=count++;
}
}
《/script》
《/head》
《body》
《div id="box"》
《div id="inner"》《/div》
《/div》
《div》事件触发了《span id="num"》《/span》次《/div》
《/body》
《/html》
以上代码实现了我们的要求，可以消除鼠标指针移入或者移出子元素所带来的困扰，虽然例子只是mouseout事件的，对于mouseover事件也是如此，下面就介绍一下此代码的实现过程:
一.实现原理:
当触发这个事件的时候，事件对象都会有一个relatedTarget属性（标准浏览器支持，IE8和IE8以下浏览器需要使用其他属性返回），它能够返回一个与事件目标节点相关的节点，如果返回的节点都是注册事件的对象的子孙元素，说明是我们将要消除的事件触发，所以只要判断如果relatedTarget返回的节点是子孙节点，就进行特殊的处理就可以了，具体可以参阅代码注释。
二.代码注释:
1.function
isMouseLeaveOrEnter(e, handler)
{}，此函数是功能的核心，可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点，如果返回true说明不是子孙节点，如果是false则说明是子孙节点。第一个参数是事件对象，第二个是注册事件处理函数的对象。
2.var reltg = e.relatedTarget ? e.relatedTarget : e.type == ’mouseout’ ? e.toElement : e.fromElement，返回事件关联对象，相关属性可以参阅相关阅读。
3.while
(reltg && reltg != handler){reltg =
reltg.parentNode}，一个while循环，条件是：如果reltg存在并且不是当前注册事件的节点，如果条件不被满足，那么将获取reltg的父节点然后再赋值给reltg，如此循环往复。这个语句的作用是判断相关元素是否值子孙元素，如果是的话，总会有一个reltg.parentNode会和handler相同。
4.return (reltg != handler)，返回一个布尔值，如果相同就返回false，如果不相同就返回true。

jquery用onmouseout和onmouseover怎么改变span或div中的文字的颜色，大小，粗体，字

首先，jQuery中的方法是mouseout和mouseover

onmouseout/onmouseover是javascript的方法

js方法：

var oBox = document.getElementById("box");
oBox.onmouseover = function(){
    var oEvent = ev || event;//兼容处理
    var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容处理
    //如果在里面则返回
    if(oFrom && oBox.contains(oFrom)){
        return;    
    }
    //移入时触发
    oBox.style.color="red";//颜色设置
    oBox.style.width="100px";//宽度
    oBox.style.height="100px"; //高度
    oBox.style.font="italic bold 12px arial,serif";//字体
}
oBox.onmouseout = function(){
     var oEvent = ev || event; //处理兼容
    var oTo = oEvent.toElement || oEvent.relatedTarget; //处理兼容
    //如果在里面则返回
    if(oTo && oBox.contains(oTo)){
        return;
    }
    //移出时触发
    oBox.style.color="black";//颜色设置
    oBox.style.width="50px";//宽度
    oBox.style.height="50px"; //高度
    oBox.style.font="italic bold 12px arial,serif";//字体  
}

jQuery方法

var price_tip_pop = null;
$(’#box’).mouseout(function(){
    //移出时触发
    $(this).css({"color":"black","width":"50px","height":"50px","font":"italic bold 12px arial"});
}).mouseover(function(){
    //移入时触发
    $(this).css({"color":"red","width":"100px","height":"100px","font":"italic bold 12px arial"});
});

JavaScript中mouseout函数一般位置

与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
  解决两者的区别，看下面引用的例子：
  当为某个容器绑定了 onmouseover 或者onmouseout 事件时，如果这个容器中有其它元素节点，那么鼠标在内部移动时会频繁触发 onmouseover和onmouseout 事件。
  而我想要的效果是：事件仅在鼠标进入/离开元素区域触发一次，当鼠标在元素区域内部移动的时候不会触发。
  为什么会出现这个原因呢？其实是因为事件冒泡导致的。当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，直到被事件处理程序（**器）捕获捕获或者冒泡到根节点（document或者window），也就是说事件会向它的父级对象派发。
知道了问题产生原因，那么解决起来是不是也很简单呢？最初我想的是取消事件冒泡，使用event.cancelBubble = true（IE）和e.stopPropagation()（其它浏览器），但是简单测试后发现貌似没有什么效果，问题依旧，貌似冒泡停止不了，原因不明。（补充：我是测试将容器中的a链接节点取消冒泡，但是发现鼠标移上移下还会触发事件。a节点下还有span节点。难道要将容器中所有节点都取消冒泡才行？有心人可以测试，如果真的这样，那也太恶心了，要是N多的节点，难道都要停止冒泡下？）
  其实在IE下鼠标事件有个 mouseEnter 和 mouseLeave，这个就是移进和移处容器时触发一次，在内部移动则不会触发，遗憾的是只有IE支持。我们现在要做的就是“为非IE浏览器添加mouseEnter和mouseLeave支持”。
  我翻阅了百度最新开源的JS库tangram，看了里面的处理，发现貌似是单独处理了非IE浏览器下的事件，使用一个叫“baidu.event._eventFilter._crossElementBoundary(listener, e)”的方法修正mouseover和mouseout，然后封装了个mouseEnter和mouseLeave事件。
baidu.event._eventFilter._crossElementBoundary = function(listener, e){
var related = e.relatedTarget,
current = e.currentTarget; if(typeof related == ’undefined’){ return listener.call(current, e);
} // 如果current和related都是body，contains函数会返回false
// Firefox有时会把XUL元素作为relatedTarget
// 这些元素不能访问parentNode属性
// thanks jquery & mootools
//如果current包含related，说明没有经过current的边界
//注：baidu.dom.contains是个定义的检测节点是否包含的函数，下面我会讲到
if(related === false || current == related || related.prefix == ’xul’ || baidu.dom.contains(current, related)){ return ;
} //调用执行
return listener.call(current, e);
};123456789101112131415161718
  百度的方法我并不喜欢，首先它只对非IE浏览器进行了处理，当然，它又进行了封装，可以直接使用mouseEnter和mouseLeave；但是，我们做普通开发，没必要这么封装，我只是想要简单的去掉mouseover和mouseout的这个恼人特性。
  而jQuery则不是这么做的，它是直接对IE和其它所有浏览器下的mouseover和mouseout事件进行了修正。参考jQuery，我得到了我目前所有的代码。
  首先，介绍个判断节点对象是否包含的函数contains.
function contains(p,c){
return p.contains ?
p != c && p.contains(c) : !!(p.compareDocumentPosition(c) & 16);
}1234
  然后就是重点的了，这里我们在IE下用到了fromElement和toElement，这两个是IE下的鼠标移上去时和移出时的节点对象。
function fixedMouse(e,target){
var related, type=e.type.toLowerCase();//这里获取事件名字
if(type==’mouseover’){
related=e.relatedTarget||e.fromElement
}else if(type=’mouseout’){
related=e.relatedTarget||e.toElement
}else return true; return related && related.prefix!=’xul’ && !contains(target,related) && related!==target;
}12345678910
  然后我们怎么用呢？比如在绑定事件时，
//addListener为封装的事件绑定函数addListener(target,’mouseover’,function(e){
e=e||window.event; if(fixedMouse(e, target)){ //do something
}
},false);1234567
  这样就会只在移入移出target节点时触发mouseover和mouseout了。
  当然，你也可以将上面的代码单独封装成mouseEnter和mouseLeave，这样可以以后调用时更好区别mouseover和mouseout。

求一段代码，鼠标触发事件，onmouseover和onmouseout，触发一个div显示和隐藏

《script》
$(document).ready(function{
$("#div1").mouseover(function{
$("#div2").hide();
});
$("#div1").mouseout(function{
$("#div2").show();
});
});
《/script》
《div id="div1" style="width:50px;height:20px;float:left;"》div1《/div》
《div id="div2" style="width:50px;height:20px;visibility:hidden;float:left;"》div2《/div》
《div style="clear:both;"》《/div》