onclick () ve onblur () sipariş sorunu

Özel bir açılır menüyü getiren bir giriş alanım var. Aşağıdaki işlevselliği istiyorum:

• Kullanıcı, giriş alanının dışında herhangi bir yere tıkladığında, menü kaldırılmalıdır.
• Daha spesifik olarak, kullanıcı menü içindeki bir div öğesini tıklarsa, menü kaldırılmalı ve hangi div öğesinin tıklandığına bağlı olarak özel işlemler gerçekleştirilmelidir.

İşte benim uygulamam:

Giriş alanında, kullanıcı giriş alanının dışına her tıkladığında onblur()menüyü silen (üst öğelerini innerHTMLboş bir dizeye ayarlayarak) bir olay vardır . Menü içindeki div'ler ayrıca onclick()özel işlemeyi yürüten olaylara da sahiptir .

Sorun şu ki, onclick()menü tıklandığında olayların asla tetiklenmemesi, çünkü onblur()ilk önce giriş alanı tetikleniyor ve onclick()s!

Sorunu, menü onclick()bölmelerini onmousedown()ve onmouseup()olaylarını bölerek ve bu yanıtta önerildiği gibi, fare aşağıdayken farenin yukarısında temizlenen global bir bayrak belirleyerek çözdüm . Daha onmousedown()önce patladığı için, menü div'lerinden biri tıklandığında onblur()bayrak ayarlanacaktır onblur(), ancak ekranda başka bir yer varsa değil. Menü tıklandıysa menüyü onblur()silmeden hemen geri dönüyorum, ardından onclick()ateşlenmesini bekliyorum, bu noktada menüyü güvenle silebilirim.

Daha zarif bir çözüm var mı?

Kod şuna benzer:

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}

Ben de sizinle aynı sorunu yaşıyordum, kullanıcı arayüzüm tam olarak sizin tanımladığınız gibi tasarlandı. Sorunu basitçe onClickfor menü öğelerini bir ile değiştirerek çözdüm onMouseDown. Ben başka hiçbir şey yapmadım; hayır onMouseUp, bayrak yok. Bu, tarayıcının benden herhangi bir ek çalışma yapmadan bu olay işleyicilerin önceliğine göre otomatik olarak yeniden sipariş vermesine izin vererek sorunu çözdü.

Bunun sizin için de işe yaramaması için herhangi bir sebep var mı?

onClickile değiştirilmemelidir onMouseDown.

Bu yaklaşım bir şekilde işe yarasa da , ikisi temelde farklı olaylardır ve kullanıcının gözünde farklı beklentiler vardır. onMouseDownBunun yerine kullanmak onClick, bu durumda yazılımınızın öngörülebilirliğini bozacaktır. Bu nedenle, iki olay birbirinin yerine geçemez.

Örneğin, kullanıcılar yanlışlıkla bir düğmeye tıkladıklarında, fare tıklamasını basılı tutabilmeyi, imleci öğenin dışına sürükleyebilmeyi ve fare düğmesini bırakarak sonuçta hiçbir işlem yapılmamasını bekler. onClickbunu yapar. onMouseDownkullanıcının fareyi basılı tutmasına izin vermez ve bunun yerine kullanıcıya herhangi bir rücu olmaksızın hemen bir eylemi tetikler. onClickbilgisayardaki eylemleri tetiklemesini beklediğimiz standarttır.

Bu durumda, çağrı event.preventDefault()üzerine onMouseDownolay. onMouseDownvarsayılan olarak bir bulanıklığa neden olur ve preventDefaultçağrıldığında bunu yapmaz . Sonra onClickaranma şansı olacak. Ancak bundan sonra bir bulanıklık olayı yine de olacaktır onClick.

Sonuçta, onClickolay bir kombinasyonudur onMouseDownve onMouseUpher ikisi de aynı elementin içinde meydana ancak ve ancak,.

Değiştir onmousedownile onfocus. Bu nedenle, odak metin kutusunun içindeyken bu olay tetiklenecektir.

Değiştir onmouseupile onblur. Odağınızı metin kutusundan çıkardığınız an, onblur çalışacaktır.

Sanırım ihtiyacın olan şey bu.

GÜNCELLEME :

onfocus fonksiyonunuzu çalıştırdığınızda -> onblur'da uygulayacağınız sınıfları kaldırın ve onfocus üzerinde çalıştırılmasını istediğiniz sınıfları ekleyin

ve

işlevinizi onblur üzerinde çalıştırdığınızda -> onfocus'ta uygulayacağınız sınıfları kaldırın ve üzerinde çalıştırılmak istediğiniz sınıfları ekleyin

Bayrak değişkenlerine ihtiyaç görmüyorum.

GÜNCELLEME 2:

Olayları mouseout ve onmouseover üzerinde kullanabilirsiniz.

onmouseover -İmlecin üzerinde olduğunu algılar.

onmouseout - İmlecin ne zaman ayrıldığını algılar.

Daha zarif (ancak muhtemelen daha az performanslı) bir çözüm:

Bunun yerine menü kullanımını kaldırmak için girişin onblur kullanmanın document.onclicksonra patlar, onblur.

Bununla birlikte, bu aynı zamanda, istenmeyen bir davranış olan giriş tıklandığında menünün kaldırıldığı anlamına gelir. Tıklamaların belge tıklama olayına yayılmasını önlemek için bir input.onclickile ayarlayın event.stopPropagation().

onfocus ile onclick'i değiştirin

onblur ve onclick çok iyi anlaşmasa bile, açıkçası odak noktası ve evet bulanıklık. çünkü menü kapatıldıktan sonra bile odak, içeriye tıklanan öğe için hala geçerlidir.

Yaptım ve işe yaradı.

İşleyicinizin setIntervaliçinde aşağıdaki onBlurgibi bir işlev kullanabilirsiniz :

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}

setIntervalişlevi kaldıracaktır onBlur 0'a çünkü sen eklemek, çağrı yığınından ayarlanan zaman işlevini, bu işlev başka olay işleyicisi bitmiş hemen sonra çağrılır