function bind(bindElement, bindEvent, bindFunction){
if (typeof(window.addEventListener) == "undefined"){ //IE下
bindElement.attachEvent('on'+bindEvent, bindFunction);
}else{
bindElement.addEventListener(bindEvent, bindFunction, true);
}
}function unbind(unbindElement, unbindEvent, unbindFunction){
if (typeof(window.addEventListener) == "undefined"){ //IE下
unbindElement.detachEvent('on'+unbindEvent,unbindFunction);
}else{
unbindElement.removeEventListener(unbindEvent,unbindFunction,true);
}
}
function evolution(evolutionElement){
bind(evolutionElement,"mouseover",function(){
unbind(evolutionElement, "mouseover", arguments.callee);
evolutionBox = document.createElement("div");
evolutionBox.style.width = evolutionElement.offsetWidth+'px'; //设置长宽
evolutionBox.style.height = evolutionElement.offsetHeight+'px';
evolutionBox.style.cssFloat = "left";
evolutionBoxTemp = evolutionBox.cloneNode(true); //由于abs会浮动出去,所以放置一个替代DIV
evolutionBox.style.border = "5px solid #6690C7";
//evolutionBox.style.cssFloat = "left";
evolutionBox.style.position = "absolute";
evolutionBoxTop = document.createElement("div"); //上部状态条
evolutionBoxTop.style.width = "100%";
evolutionBoxTop.style.height = '3px';
evolutionBoxTop.style.background = "#6690C7";
evolutionBox.appendChild(evolutionBoxTop);
evolutionElement.parentNode.insertBefore(evolutionBoxTemp,evolutionElement);
evolutionElement.parentNode.insertBefore(evolutionBox,evolutionElement);
evolutionBox.appendChild(evolutionElement);
bind(evolutionBox,"mouseout",function(){
evolutionBox.parentNode.insertBefore(evolutionElement,evolutionBox);
evolutionElement.parentNode.removeChild(evolutionElement.nextSibling);
evolutionElement.parentNode.removeChild(evolutionElement.previousSibling);
});
});
} 我就是在mouseover触发后给触发动作的标签A外面再包裹一层有border标签B,然后我想要mouseout是在鼠标移开外面那个大标签B的时候再触发,而不是一移开里面的标签A就触发。
但是这段js的效果就是鼠标一移开里面的标签A就触发了,求助要如何做到移开标签B再触发?
if (typeof(window.addEventListener) == "undefined"){ //IE下
bindElement.attachEvent('on'+bindEvent, bindFunction);
}else{
bindElement.addEventListener(bindEvent, bindFunction, true);
}
}function unbind(unbindElement, unbindEvent, unbindFunction){
if (typeof(window.addEventListener) == "undefined"){ //IE下
unbindElement.detachEvent('on'+unbindEvent,unbindFunction);
}else{
unbindElement.removeEventListener(unbindEvent,unbindFunction,true);
}
}
function evolution(evolutionElement){
bind(evolutionElement,"mouseover",function(){
unbind(evolutionElement, "mouseover", arguments.callee);
evolutionBox = document.createElement("div");
evolutionBox.style.width = evolutionElement.offsetWidth+'px'; //设置长宽
evolutionBox.style.height = evolutionElement.offsetHeight+'px';
evolutionBox.style.cssFloat = "left";
evolutionBoxTemp = evolutionBox.cloneNode(true); //由于abs会浮动出去,所以放置一个替代DIV
evolutionBox.style.border = "5px solid #6690C7";
//evolutionBox.style.cssFloat = "left";
evolutionBox.style.position = "absolute";
evolutionBoxTop = document.createElement("div"); //上部状态条
evolutionBoxTop.style.width = "100%";
evolutionBoxTop.style.height = '3px';
evolutionBoxTop.style.background = "#6690C7";
evolutionBox.appendChild(evolutionBoxTop);
evolutionElement.parentNode.insertBefore(evolutionBoxTemp,evolutionElement);
evolutionElement.parentNode.insertBefore(evolutionBox,evolutionElement);
evolutionBox.appendChild(evolutionElement);
bind(evolutionBox,"mouseout",function(){
evolutionBox.parentNode.insertBefore(evolutionElement,evolutionBox);
evolutionElement.parentNode.removeChild(evolutionElement.nextSibling);
evolutionElement.parentNode.removeChild(evolutionElement.previousSibling);
});
});
} 我就是在mouseover触发后给触发动作的标签A外面再包裹一层有border标签B,然后我想要mouseout是在鼠标移开外面那个大标签B的时候再触发,而不是一移开里面的标签A就触发。
但是这段js的效果就是鼠标一移开里面的标签A就触发了,求助要如何做到移开标签B再触发?
参见 http://hi.baidu.com/summer8th/blog/item/a1e9c78c4e8497eb503d920c.html
是mouseout的子节点触发问题,mouseout给子节点全绑上mouseout了,然后在子节点进进出出也会触发mouseout,利用relatedTarget来把内部触发的mouseout给return掉就OK了~~