SORU
15 Ocak 2011, CUMARTESİ


JQuery OLMADAN üst mutlak dıv alt öğe üzerinde gezinirken onmouseout önlemek

Merhaba mutlak positoned bir div onmouseout fonksiyonu ile sorun yaşıyorum. Fare div içinde bir alt öğe çarptığında, mouseout olayı harekete, ama fare veli, mutlak div dışına çıkana kadar ateş etmek istemiyorum.

Nasıl bir WordPress kullanmak OLMADAN bir alt öğe çarptığında ateş mouseout olay engelleyebilirim.

Bu olay köpürme ile ilgisi var biliyorum, ama bu iş bulma konusunda hiç şansım yok.

Benzer bir yazı buldum: How to disable mouseout events triggered by child elements?

Ancak bu çözüm jQuery kullanır.

CEVAP
15 Ocak 2011, CUMARTESİ


function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

Hızlı JsFiddle demo, tüm CSS ve HTML gerektiği, check it out

EDİTÇapraz-tarayıcı için SABİT bağlantı http://jsfiddle.net/RH3tA/9/ destek

NOTbu sadece hemen ana kontrol eden, eğer üst div çocuklar iç içe geçmiş olsaydı o zaman bir şekilde öğeleri arasında geçiş için anne arıyor "Özgün unsuru"

EDİTiç içe geçmiş çocuklar için örnek

EDİTUmarım sabit tarayıcı çapraz

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i  ) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

Ve yeni bir JSFiddle,EDİTlink güncellendi

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Awesomesauce Network

    Awesomesauce

    4 EKİM 2012
  • Kontor.TV

    Kontor.TV

    14 Mart 2006
  • KRQE

    KRQE

    6 AĞUSTOS 2007