Как вызвать размытие в jQuery, за исключением нажатия кнопки?

Question

У меня есть поле ввода, заключенное в среду jQuery mobile 1.4.5, которое будет фокусироваться вверх, чтобы освободить место для мобильных устройств для предложений поиска.

После заполнения поля оно будет прокручиваться вниз.

$('#refn').on('blur',function(){

  if ( (document.querySelector('.ui-input-clear-hidden') !== null) ) {
    $("html, body").animate({ scrollTop: 0}, 200);
  }

  return false;
});

JQM предоставит четкую ссылку справа, которая очистит текстовое поле. Это проблема, так как нажатие на нее расфокусирует и вызовет функцию прокрутки вниз. В результате появляется эффект прокрутки вниз и вверх.

Я пытался исключить это, распознавая класс .ui-input-clear-hidden, но это не имеет никакого эффекта. Я верю, потому что это ссылка, которая убирает фокус с поля.

<a href="#" tabindex="-1" aria-hidden="true" 
class="
 ui-input-clear 
 ui-btn 
 ui-icon-delete 
 ui-btn-icon-notext 
 ui-corner-all" 
title="Clear text">Clear text</a>

Я хочу активировать функцию, только если кнопка очистки не нажата. Как это можно сделать?

Answer 1

Если я понимаю, проблема в том, что когда вы нажимаете кнопку с открытым текстом, она выполняет вашу кнопку, которая прокручивается вниз?

Я думаю, вы можете попытаться получить сфокусированный элемент, и если это кнопка очистки, вы ничего не делаете

$('#refn').on('blur',function(){

  var focused_element = document.querySelector(':focus') ; //Get the focused element.
  if ( focused_element.hasClass('.ui-input-clear-hidden') ) {
    //It's the clear button
     return false;
  }else{
     //It's not your clear button
     $("html, body").animate({ scrollTop: 0}, 200);
  }
});

Редактировать :: попытаться сохранить клик clear_btn в переменной

//Function to force wait time
function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

var clear_btn_clicked = false;

//Event on click
$(document).on("click",function(){
     //You clicked on the X btn
     if( $(this).hasClass('ui-input-clear-hidden' ) ){
         clear_btn_cliked = true;
     }else{
         clear_btn_clicked = false;
     }
});


$('#refn').on('blur',function(){
  await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
  if( clear_btn_clicked === false ){
    $("html, body").animate({ scrollTop: 0}, 200); //You didn't click on the X
  }else{
    return false; //You clicked on the X
  }
});

//You do same for your focus function
 $('#refn').on('focus',function(){
     await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
     if( clear_btn_clicked === false ){
          //Scroll up
     }else{
          //Don't go up
     }
 });