DIV elementinden bahsetmişken, içinde bir IMG öğesi ve bir SPAN öğesi var, bu iki iç elemanın nasıl düzenlendiği konusunda endişelenmeyin, tartışmak istediğim konu bu değil.
Bazı özel efektler elde etmek için TD'nin onmouseover ve onmouseout etkinliklerini kullanmam gerekiyor ve test ettiğimde aşağıdaki durumu bulacağım:
Fare DIV'in içine girdiğinde, onmouseover olayı tetiklenir; Sonra fareyi DIV'in içindeki IMG veya SPAN öğesine götürüyorsunuz, kesinlikle farenin DIV'in dışına taşındığını düşünmüyoruz, ama garip olan şu ki onmouseout olayı tetikleniyor ve onmouseover olayı da hemen tetikleniyor.
İstediğim bu değil, peki iç elemanların dış elemanlara getirdiği Javascrip{filtering}t olaylarının müdahalesini nasıl "engelleyebilirim"?
İşte iki yöntem:
1. setTimeOut
Çünkü fare iç elemanın üzerine geçip dış elemanın onmouseout olayını tetikledikten sonra, dış elemanın onmouseover olayı da hemen tetiklenir, bu yüzden dış elemanın onmouseout olayının çalıştırması gereken eylemi kısa bir süre geciktirip ardından onmouseover olayında clearTimeout yöntemini çalıştırmamız gerekir, böylece iç elemanın neden olduğu olay müdahalesini önleyebiliriz.
Lütfen belirli yürütme süreci için aşağıdaki şekle bakınız (dikey noktalı çizgi zamanı temsil eder):
Bu akıllıca bir yaklaşımdır, çünkü onmouseout tetiklendiğinde, madde yöntemi hemen uygulanmaz, kısa bir süre bekler. Onmouseover olayı bu süre içinde hemen tetiklenirse, onmouseout olayının dahili öğelerden gelen parazit nedeniyle tetiklendiği temelde kesindir, bu yüzden onmouseover olayında clearTimeout kullanılarak gecikmeli yöntemin çalıştırılmasını önleyebilir.
2. içerir
Onmouseover sırasında aşağıdaki kararı verin ve sonuç doğru olduğunda yöntem gövdesini çalıştırın:
Onmouseout sırasında aşağıdaki yargıyı verin ve sonuç doğru olduğunda yöntem gövdesini çalıştırın:
İşte yukarıdaki iki satırın anlamının açıklaması:
IE'de, tüm HTML öğelerin, mevcut öğenin belirli bir elemanı içerip içermediğini belirleyen bir contain yöntemi vardır. Bu yöntemi, dış bir elemanın bir olayının iç bir eleman tarafından tetiklenip tetiklenmediğini belirlemek için kullanıyoruz ve eğer bir iç eleman istenmeyen bir olayın tetiklenmesine neden olursa, bu olayı görmezden geliyoruz.
event.fromElement, onmouseover ve onmouseout olayları tetiklendiğinde farenin ayrıldığı öğeyi gösterir; event.toElement, onmouseover ve onmouseout olayları tetiklendiğinde farenin girdiği öğeyi gösterir.
Yukarıdaki iki satırın anlamı şudur:
- Onmouseover olayı tetiklendiğinde, farenin bıraktığı elemanın mevcut elemanın iç öğesi olup olmadığını belirler ve öyleyse bu olayı görmezden gelir;
- Onmouseout olayı tetiklendiğinde, farenin girdiği elemanın mevcut elemanın iç öğesi olup olmadığını değerlendirin ve öyleyse bu olayı görmezden gelin;
Bu şekilde, iç element dış elementin onmouseover ve onmouseout olaylarına müdahale etmez.
Ancak sorun şu ki, IE olmayan tarayıcılar contain fonksiyonunu desteklemiyor, ancak artık contain fonksiyonunun işlevini bildiğimize göre, aşağıdaki kodu ekleyerek IE olmayan tarayıcılar için contain desteğini ekleyebiliriz:
Yukarıdaki yöntemler Firefox ile uyumlu değildir:
Mesele şu ki: jQuery:
jQueryMouseout yerine mouseleave kullanın, böylece yukarıda söylenenlerin gerçekleşmemesi için geçerlidir.
Ayrıca, mouseover tekrar tekrar tetiklenir, bunun yerine mouseenter kullanın.
Mükemmel çözüm~
|
Yayınlandı 17.12.2018 14:57:53
|
|
|
|
