除了单击按钮之外,如何在 jQuery 中触发模糊?

Posted

技术标签:

【中文标题】除了单击按钮之外,如何在 jQuery 中触发模糊?【英文标题】:How to trigger on blur in jQuery with exception of clicking a button? 【发布时间】:2019-09-18 18:27:14 【问题描述】:

我有一个包含在 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>

我只想在未单击清除按钮时触发该功能。如何做到这一点?

【问题讨论】:

【参考方案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 点击存储在 var 中

//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
     
 );

【讨论】:

有趣的方法。在尝试实现时,我确实得到:“未捕获的 TypeError:无法读取属性 'hasClass' of null”。你确定这行得通吗? (jq 2.1.4) 你可以试试 -> var focus_element = $(':focus') ; 不确定这是否是正确的方法,即使 ( $('.ui-input-clear').is(':focus') ) 将不起作用,因为焦点是“未定义” . 为什么不将向上滚动动画放在输入焦点事件上?我认为这可能更容易 就是这样。 $('#refn').on('focus')... 提到的功能是 on blur,不幸的是,如果单击 X,也会发生这种情况。之后它会在一秒钟后再次获得焦点。所以它会再次下跌和上涨

以上是关于除了单击按钮之外,如何在 jQuery 中触发模糊?的主要内容,如果未能解决你的问题,请参考以下文章

在 JQuery 委托中触发表单提交

直到用户在输入字段之外单击才会触发自动完成 jQuery 更改

单击按钮时如何触发PHP / jQuery [重复]

在jquery中触发按钮单击的所有可能方法

如何调用jquery函数然后触发按钮的点击事件?

XCUITest - 单击后退按钮后,除了睡眠之外,我还能使用啥来在屏幕上查找项目?