除了单击按钮之外,如何在 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 中触发模糊?的主要内容,如果未能解决你的问题,请参考以下文章