Событие при наведении мыши, вызванное дочерними элементами - как это остановить? - PullRequest
Новая
       10

Событие при наведении мыши, вызванное дочерними элементами - как это остановить?

2 голосов
/ 04 ноября 2010

У меня есть этот интерфейс, который я хочу построить, используя Effect.Move из scriptaculous (с Prototype, конечно).

Когда верхний div запускается при наведении мыши, тег spanпереместите 50 пикселей влево - и сбросьте без перемещения в исходное положение при наведении мыши.Проблема в том, что каждый раз, когда этот элемент div вводится из дочернего элемента, элемент, который я хочу переместить, перемещается на дополнительные 50 пикселей.Я пытался использовать relatedTarget и toElement, чтобы остановить распространение этого события, но безрезультатно.Вот код, пока еще неполный: 

e.observe('mouseover', function(evt) {
   var block = e.down('span');

   if(evt.target == block && !evt.relatedTarget.descendantOf(block)){
    new Effect.Move(block, { x: -50, duration: 0.4, 

    });
   } else {

   }

  });

Пример HTML: 

<div class='trigger'>
  <span class='to-be-moved'>...</span>
  <p>Child Element</p>
  <h2>Another Child Element</h2>
  <a>Link</a>
</div>

Я полностью потерян - какие-либо предложения?

Ответы [ 3 ]

2 голосов
/ 07 ноября 2010

Вы пытались использовать "mouseenter" и "mouseleave" вместо "mouseover" и "mouseout"?Они сработают только один раз, даже с дочерними элементами, и Prototype поддерживает его с 1.6.1 .

0 голосов
/ 30 ноября 2010

Смотрите здесь .

Если вы ищете конкретный элемент, который вызвал событие onmouseover, используйте метод Event.findElement(...) прототипа, чтобы отсеивать нежелательных потомков.

Ответ Серкана - это хитрый способ выполнить задачу, но он не будет работать во всех браузерах.

0 голосов
/ 10 ноября 2010

Попробуйте эту функцию 

function hover(elem, over, out){
    $(elem).observe("mouseover", function(evt){
        if(typeof over == "function"){
            if(elem.innerHTML){
                if(elem.descendants().include(evt.relatedTarget)){ return true; }
            }
            over(elem, evt);
        }else if(typeof over == "string"){
            $(elem).addClassName(over);
        }
    });
    $(elem).observe("mouseout", function(evt){
        if (typeof out == "function") {
            if(elem.innerHTML){
                if(elem.descendants().include(evt.relatedTarget)){ return true; }
            }
            out(elem, evt);
        }else if(typeof over == "string"){
            $(elem).removeClassName(over);
        }
    });
    return elem;
}

Использование: 

hover($('el_id'), function(elem, evt){
    /* Mouse over code here */
},
function(elem, evt){
    /* Mouse out code is here */
});

Это очень просто.

...