主页 / coding / 问题 / 78334565
Accepted
marklovin
Asked: 2024-04-16 20:33:50 +0800 CST

禁用下拉输入焦点的功能

  • 772

我使用下面的函数将滚动事件绑定到滑块元素，以触发下一张/上一张幻灯片。

然而，在某些情况下，我想禁用该功能，例如当下拉列表处于焦点时，以允许用户滚动下拉列表。然后，当下拉元素失去焦点时，我想重新激活滚动功能。如何才能实现这一目标？

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var onScroll = debounce(function(direction) {
  if (direction == false) {
    $(".slider-next").trigger('tap');
  } else {
    $(".slider-prev").trigger('tap');
  }
}, 100, true);

$('#slider').bind('wheel mousewheel', function(e) {
  e.preventDefault();
  var delta;
  if (typeof event != 'undefined' && event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * e.originalEvent.deltaY;
  }
  onScroll(delta >= 0);
});
javascript

1 个回答

  1. Best Answer

    以下是您可以修改当前实现以根据下拉列表是否处于焦点状态启用和禁用滚动事件处理的方法：

    第 1 步：定义一个标记来跟踪下拉焦点

    创建一个标志，指示当前是否有任何下拉菜单处于焦点状态。这将确定是否处理滑块的滚动事件。

    var dropdownInFocus = false;

// Detect focus on any dropdown
$('select').on('focus', function() {
  dropdownInFocus = true;
});

// Detect blur on any dropdown
$('select').on('blur', function() {
  dropdownInFocus = false;
});

    您可以指向任何元素；下拉菜单通常是选择元素。

    步骤 2：修改事件处理程序以遵循焦点标志

    更新现有的滚动事件处理程序以在决定触发下一张/上一张幻灯片之前检查 dropdownInFocus 标志。

    $('#slider').bind('wheel mousewheel', function(e) {
  if (!dropdownInFocus) {
    e.preventDefault();
    var delta;
    if (typeof event != 'undefined' && event.wheelDelta) {
      delta = event.wheelDelta;
    } else {
      delta = -1 * e.originalEvent.deltaY;
    }
    onScroll(delta >= 0);
  }
});

    解释

    该解决方案利用一个简单的标志 (dropdownInFocus) 来跟踪是否有任何下拉菜单获得焦点。当下拉列表接收焦点时，该标志设置为 true，禁用滑块的滚动绑定。当下拉菜单失去焦点时，该标志将重置为 false，从而重新启用滑块的滚动功能。这允许用户滚动下拉菜单，而不会无意中触发滑块的导航。

    • 0

相关问题