时间戳

首页 > 解决方案 > 在输入焦点上打开引导下拉菜单

javascript - 在输入焦点上打开引导下拉菜单

问题描述

我有一个输入，当单击它时会显示一个引导程序 4 下拉列表，但我需要在用户点击它时打开它以实现 ADA 可访问性。

如果我使用使用 $('#input-name).dropdown('toggle') 的焦点事件，它可以正常工作，但是当单击输入时，焦点首先会触发打开下拉列表，然后单击事件将其关闭。

我试过 e.preventDefault(); e.stopPropagation(); 但两者都无助于解决这个问题。

events: {
  focus #healthPlanMenu": "openDropDown"
}


openDropDown: function (e) {

  if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
   }//fails

    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
    $( "#healthPlanMenu" ).click();//fails

  }

标签： javascriptjquerybackbone.jsbootstrap-4backbone-views

解决方案

因此，理想情况下，您可能会通过让focus事件将下拉菜单的状态设置为打开来解决此问题，这样，如果单击事件“重新打开”它，没问题。toggle但是，据我所知，jQuery API只有一个选项；似乎不必要的限制...

鉴于此，我们可以通过使用来知道在我们的焦点事件之后是否有点击mousedown。所以解决这个问题的一个有点老套的方法是，如果我们知道点击即将到来，就禁用我们的焦点事件。

(function() {
	var disable = false;
	$('#healthPlanMenu.dropdown-toggle')
		.on('mousedown touchstart', function() {
			disable = true;
		})
		.on('focus', function() {
			if (!disable) {
				$(this).dropdown('toggle');
			}
		})
		.on('mouseup touchend',function() {
			disable = false;
		})
})()

我不知道touchstart和touchend是否有必要，因为大多数浏览器也可能在触摸时触发鼠标事件。但安全总比后悔好。

推荐阅读