Início / coding / Perguntas / 78334565
Accepted
marklovin
Asked: 2024-04-16 20:33:50 +0800 CST

Desabilitar uma função no foco da entrada suspensa

  • 772

Estou usando a função abaixo para vincular eventos de rolagem a um elemento deslizante, para acionar os slides seguintes/anteriores.

No entanto, em certas situações, gostaria de desabilitar essa função, nos casos em que os menus suspensos estão em foco, para permitir que o usuário role pela lista suspensa. E então, quando o elemento suspenso estiver fora de foco, gostaria de reativar minha função de rolagem. Como isso pode ser alcançado?

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 respostas

  1. Best Answer

    Veja como você pode modificar sua implementação atual para ativar e desativar a manipulação de eventos de rolagem com base no fato de os menus suspensos estarem em foco:

    Etapa 1: definir um sinalizador para rastrear o foco suspenso

    Crie um sinalizador que indicará se algum menu suspenso está em foco no momento. Isso determinará se os eventos de rolagem do controle deslizante serão manipulados.

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

    Você pode apontar para qualquer elemento; menus suspensos normalmente são elementos selecionados.

    Etapa 2: modifique o manipulador de eventos para respeitar o sinalizador de foco

    Atualize seu manipulador de eventos de rolagem existente para verificar o sinalizador dropdownInFocus antes de decidir acionar os slides seguintes/anteriores.

    $('#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);
  }
});

    Explicação

    Esta solução aproveita um sinalizador simples (dropdownInFocus) para rastrear se algum menu suspenso está em foco. Quando um menu suspenso recebe o foco, o sinalizador é definido como verdadeiro, desativando a vinculação de rolagem do controle deslizante. Quando o menu suspenso perde o foco, o sinalizador é redefinido para falso, reativando a funcionalidade de rolagem do controle deslizante. Isso permite que os usuários rolem pelos menus suspensos sem acionar a navegação do controle deslizante involuntariamente.

    • 0

relate perguntas