Bir 'bulanıklaştırma' olayı meydana geldiğinde, hangi öğe odağının * öğesine * gittiğini nasıl öğrenebilirim?

Diyelim ki bir blurBir HTML giriş kutusuna böyle işlev :

<input id="myInput" onblur="function() { ... }"></input>

blurFonksiyonun içinde olayın tetiklenmesine (tıklatılan öğe) neden olan öğenin kimliğini almanın bir yolu var mı ? Nasıl?

Örneğin, şöyle bir yayılma alanım olduğunu varsayalım:

<span id="mySpan">Hello World</span>

Giriş öğesi odağa girdikten hemen sonra aralığı tıklatırsam, giriş öğesi odağını kaybeder. İşlev mySpantıklatıldığını nasıl biliyor ?

Not: Kapağın onclick olayı, giriş öğesinin onblur olayından önce gerçekleşirse, sorunum çözülür, çünkü belirli bir öğenin tıklandığını gösteren bazı durum değerleri ayarlayabilirim.

PPS: Bu sorunun arka planı önerileri göstermek bluriçin giriş öğesindeki olay nedeniyle hemen kaybolmadan harici bir AJAX otomatik tamamlayıcı denetimi (tıklanabilir bir öğeden) tetiklemek istiyorum olmasıdır . Bu nedenle, blurbelirli bir öğenin tıklanıp tıklanmadığını ve bu durumda bulanıklaştırma olayını yoksaydım.

Hmm ... Firefox'ta, explicitOriginalTargettıklanan öğeyi çekmek için kullanabilirsiniz . toElementIE için de aynısını yapmayı bekledim , ancak işe yaramıyor ... Ancak, yeni odaklanmış öğeyi belgeden çekebilirsiniz:

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

Uyarı: Bu teknik geliyor değil odak için çalışma kaynaklanan değişiklikleri sekme klavye ile alanlar arasında ve Chrome veya Safari hiç işi yok. Kullanarak büyük bir sorun activeElement(IE hariç) sürekli güncellenen kadar olmamasıdır sonrablur olay işleme konuldu ve işlem sırasında da hiç geçerli bir değere sahip olabilir! Bu, Michiel'in kullandığı teknikte bir varyasyon ile hafifletilebilir :

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

Bu, çoğu modern tarayıcıda (Chrome, IE ve Firefox'ta test edilmiştir) çalışmalı ve Chrome'un tıklanan düğmelere odaklanmamasına dikkat edilmelidir (sekme yerine).

2015 yanıtı : UI Etkinliklerine göre relatedTarget, etkinliğin özelliğini kullanabilirsiniz :

EventTargetOlayın türüne bağlı olarak, bir Focus olayıyla ilgili ikincil bir tanımlamak için kullanılır .

İçin blurolaylar,

relatedTarget: olay hedefi alan odak.

Misal:

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

Not Firefox, relatedTargetsürüm 48'e kadar desteklenmez ( hata 962251 , MDN ).

Sonunda onblur olayında bir zaman aşımı ile çözdüm (StackOverflow olmayan bir arkadaşın tavsiyesi sayesinde):

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

Hem FF hem de IE'de çalışır.

Bulanıklık yerine belgenin fareyle üzerine gelme olayını kullanmak mümkündür:

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

Tür FocusEventörnekleri varrelatedTarget özniteliği vardır, ancak FF'nin 47 sürümüne kadar, özellikle bu öznitelik null değerini döndürür, 48'den zaten çalışır.

Burada daha fazlasını görebilirsiniz .

Ayrıca belirli bir öğe tıkladı ve çalışma bir çözüm var, ancak yalnızca Firefox nedeniyle explicitOriginalTarget nedeniyle Autocompleter bulanıklaştırma yoksay yapmaya çalışıyorum

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

Bu kod, Autocompleter öğesinin varsayılan onBlur yöntemini sarar ve ignoreBlurEventElement parametrelerinin ayarlanıp ayarlanmadığını denetler. ayarlanmışsa, tıklanan öğenin ignoreBlurEventElement öğesinin olup olmadığını her seferinde kontrol eder. Eğer öyleyse, Autocompleter onBlur'u çağırmaz, aksi halde onBlur'u çağırır. Bununla ilgili tek sorun, explicitOriginalTarget özelliği Mozilla'ya özgü olduğu için yalnızca Firefox'ta çalışmasıdır. Şimdi explicitOriginalTarget kullanmaktan farklı bir yol bulmaya çalışıyorum. Bahsettiğiniz çözüm, öğeye manuel olarak onclick davranışı eklemenizi gerektirir. ExplicitOriginalTarget sorununu çözemezsem, çözümünüzü takip edeceğim sanırım.

Neyi ne zaman kontrol ettiğinizi tersine çevirebilir misiniz? En son neyin bulanık olduğunu hatırlarsanız:

<input id="myInput" onblur="lastBlurred=this;"></input>

ve daha sonra yayınınız için onClick'te, her iki nesneyle birlikte function () işlevini çağırın:

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

Ardından, işleviniz Ajax.AutoCompleter denetiminin tetiklenip tetiklenmeyeceğine karar verebilir. İşlev tıklanan nesneyi ve bulanık nesneyi içerir. OnBlur zaten oldu, bu yüzden önerilerin kaybolmasını sağlamayacak.

Bunun gibi bir şey kullanın:

var myVar = null;

Ve sonra fonksiyonunuzun içinde:

myVar = fldID;

Ve sonra:

setTimeout(setFocus,1000)

Ve sonra:

function setFocus(){ document.getElementById(fldID).focus(); }

Son kod:

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

Bence possibe değil, IE ile kullanmayı deneyebilirsiniz window.event.toElement, ancak dosfox ile çalışmaz!

Bu cevapta belirtildiği gibi , değerini kontrol edebilirsiniz document.activeElement. documentglobal bir değişkendir, bu nedenle onBlur işleyicinizde kullanmak için sihir yapmanız gerekmez:

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

• document.activeElement bir üst düğüm olabilir (örneğin, geçici bir aşamada bir hedeften diğerine geçiş yaptığı için gövde düğümü), bu nedenle kapsamınız için kullanılamaz
• ev.explicitOriginalTarget her zaman değerlenmez

Bu yüzden en iyi yol, dolaylı olarak düğümünüzü (event.target) bulanıklıkta olduğunu anlamak için onclick body olayını kullanmaktır

Google Chrome v66.x, Mozilla v59.x ve Microsoft Edge'de çalışır ... jQuery ile çözüm.

Internet Explorer 9'da test ediyorum ve desteklenmiyor.

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

Testinizi diğer internet explorer sürümlerinde yorumlayın.

Düzenleme: Bunu yapmak için hacky bir yol önem verdiğiniz her öğe için odak iz tutan bir değişken oluşturmak olacaktır. Bu nedenle, 'myInput'un odağı kaybettiğini düşünüyorsanız, odakta bir değişken ayarlayın.

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

Orijinal Yanıt: Bu işleve 'this' iletebilirsiniz.

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />

Ben blurfrom ve blurto genel değişkenlerini kullanmanızı öneririm. Ardından, odak kaybettiklerinde DOM'daki konumlarını değişken bulanıklıktan atamak istediğiniz önemli tüm öğeleri yapılandırın. Ayrıca, yapılandırmak onları çok odak kazanıyor değişken blurto teşkil ettiği kendi DOM'da pozisyon. Ardından, bulanıklaştırma ve bulanıklaştırma verilerini analiz etmek için tamamen başka bir işlev kullanabilirsiniz.

explicitOriginalTarget ile çözümün, metin-giriş-metin-giriş sıçramalarında çalışmadığını unutmayın.

düğmeleri aşağıdaki metin girişleriyle değiştirmeyi deneyin ve farkı göreceksiniz:

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

Aynı özellikle oynuyorum ve FF, IE, Chrome ve Opera'nın bir etkinliğin kaynak öğesini sağlama yeteneğine sahip olduğunu öğrendim. Safari'yi test etmedim ama tahminim buna benzer bir şey olabilir.

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

Ben javascript kodlarken zaman aşımı kullanarak sevmiyorum böylece Michiel Borkent ters yolu yapardı. (Arkasındaki kodu deneyin vermedi ama fikir almalısınız).

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

Kafasında böyle bir şey

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

IE'yi aşağıdakilerle düzeltebilirsiniz:

 event.currentTarget.firstChild.ownerDocument.activeElement

FF için "explicitOriginalTarget" gibi görünüyor.

Antoine ve J

Alternatif bir çözüm yazdımHerhangi bir öğenin odaklanabilir ve "mavileştirilebilir" hale getirilmesi .

Bir öğeyi oluşturmaya contentEditableve görsel olarak gizlemeye ve düzenleme modunun kendisini devre dışı bırakmaya dayanır :

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

DEMO

Not: Chrome, Firefox ve Safari'de (OS X) test edilmiştir. IE hakkında emin değilim.

İlgili: VueJ'ler için bir çözüm arıyordum, bu yüzden Vue Focusable yönergesini kullanarak böyle bir işlevin nasıl uygulanacağını merak eden / merak edenler için lütfen bir göz atın .

Bu yoldan:

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

Veya dinleyiciyi JavaScript ile eklerseniz (bu örnekte jQuery):

var input = $('#myinput').blur(function() {
    alert(this);
});

Düzenleme : üzgünüm. Soruyu yanlış okudum.

"Bu" onblur olayı neden alan referansını geçerek jquery ile kolayca mümkün olduğunu düşünüyorum.
Örneğin;

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

Teşekkürler
Monika

Bunu şu şekilde yapabilirsiniz:

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>

Cevaplarda sadece saldırıları görüyorum, ancak aslında kullanımı çok kolay olan yerleşik bir çözüm var: Temel olarak odak öğesini şöyle yakalayabilirsiniz:

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement