Question

我上面有一个小div（悬停）一个大的我将onmouseover和onmouseout事件分配给包装器div 对于图像标题翻转动画。

问题是当鼠标位于标题本身之上时，会导致不需要的结果（可能是事件冒泡）。

另一个问题是：有时当你将鼠标从外部移动到容器时，会得到一个三重序列:(它应该只是2）：
-我完了- - 我出去了 - - 我结束了 -

如何让它发挥作用？（没有jquery ）
必须适用于所有浏览器。

我已经添加了firebug控制台日志，以便更好地进行调试。

更新
我在RollOverDescription中添加了这个（不在在线演示中）：

if (!eventHandle) var eventHandle = window.event;               
var srcEle = eventHandle.srcElement.id;             
if(srcEle=="imageDescription" ){
    return;
}

但它没有帮助。

Answer 1

在quirksmode（靠近底部）上的

This article会解释您遇到的问题以及可能对您有帮助的脚本。关于鼠标事件也有很多跨浏览器信息

好的，这是一些有效的代码。我不保证这是最有效的，或者它不会导致IE中的内存泄漏（或者它在IE中工作 - 请告诉我）。这就是为什么人们使用库，更安全，更容易。

// a general purpose, cross browser event adder
// returns a function that if run removes the event
function addEvent( el, eventType, handler, capturing ) {
    if( el.addEventListener ) {
        el.addEventListener( eventType, handler, capturing || false );
        var removeEvent = function() { el.removeEventListener( eventType, handler, capturing || false ) };
    } else if( el.attachEvent ) {
        var fn = function() {
            handler.call( el, normalise( window.event ) );
        };
        el.attachEvent( 'on'+eventType, fn );
        var removeEvent = function(){ el.detachEvent( 'on'+eventType, fn ) };
    }
    function normalise( e ) {
        e.target = e.srcElement;
        e.relatedTarget = e.toElement;

        e.preventDefault = function(){ e.returnValue = false };
        e.stopPropagation = function(){ e.cancelBubble = true };
        return e;
    };
    return removeEvent;
};



// adds mouseover and mouseout event handlers to a dom element
// mouseover and out events on child elements are ignored by this element
// returns a function that when run removes the events
// you need to send in both handlers - an empty function will do
function addMouseOverOutEvents( element, overHandler, outHandler ) {

    function out( e ) {
        var fromEl = e.target;
        var toEl = e.relatedTarget;
        // if the mouseout didn't originate at our element we can ignore it
        if( fromEl != element ) return;
        // if the element we rolled onto is a child of our element we can ignore it
        while( toEl  ) {
            toEl = toEl.parentNode;
            if( toEl == element ) return;
        }
        outHandler.call( element, e );
    }

    function over( e ) {
        var toEl = e.target;
        var fromEl = e.relatedTarget;
        // if the mouseover didn't originate at our element we can ignore it
        if( toEl != element ) return;
        // if the element we rolled from is a child of our element we can ignore it
        while( fromEl  ) {
            fromEl = fromEl.parentNode;
            if( fromEl == element ) return;
        }
        overHandler.call( element, e );
    }

    var killers = [];
    killers.push( addEvent( element, 'mouseover', over ) );
    killers.push( addEvent( element, 'mouseout', out ) );
    return function() {
        killers[0]();
        killers[1]();
    }
}

使用示例：

// add the events
var remover = addMouseOverOutEvents(
    document.getElementById( 'elementId' ),
    function( e ) {
        this.style.background = 'red';
        console.log( 'rolled in: '+e.target.id );
    },
    function( e ) {
        this.style.background = 'blue'
        console.log( 'rolled out: '+e.target.id );
    }    
);

//remove the events
remover();

Onmouseover儿童div问题和事件冒泡

1 个答案: