Элегантный способ обработки нажатия и нажатия клавиш в одной функции

Question

У меня есть куча мест, где мне приходится кодировать одну и ту же функциональность для клика и нажатия клавиши ENTER (keyup).Я заканчиваю писать обработчики событий, например так:

$('#SomeElement').on('click keyup', function (e) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
    //  do what needs to be done
  }
});

Есть ли элегантный способ обработки этого без оператора if?Я ненавижу тот факт, что это обработчик событий, специфичный для click и keyup, но я должен проверить тип события внутри обработчика.

РЕДАКТИРОВАТЬ: Я в порядке сабстрагирование оператора if в отдельную функцию.Пока мне не нужно копировать / вставлять одну и ту же строку кода снова и снова.

Answer 1

Мое окончательное решение - Расширения событий jQuery .

Создание расширения события jQuery, специфичного для клавиши ENTER.

$.event.special.enterkey = {
    delegateType: 'keyup',
    bindType: 'keyup',
    handle: function (event) {
        if (event.keyCode === 13)
            return event.handleObj.handler.apply(this, arguments);
    }
};

Теперь все, что мне нужно сделать, это следующее.Аккуратный и элегантный.

$('#SomeElement').on('click enterkey', function (e) {
    //  do what needs to be done
});

PS Для всех инкогнито-даунвотеров - вам должно быть стыдно за себя.

Answer 2

Вам понадобится условие if, чтобы подтвердить, нажата ли клавиша ввода.Таким образом, вы не можете полностью избавиться от условия if.

Но вы можете избавиться от избыточных условий, например, вам не нужно проверять, является ли тип события keyup, как мы знаем, если событие неclick, это определенно будет keyup событие.

Так что вы можете уменьшить свое состояние до

e.type === 'click' || e.keyCode === 13

Answer 3

Я не совсем понял, что вы имеете в виду под «у меня есть куча мест, где мне приходится кодировать ту же функциональность».Но, насколько я понимаю, вы хотите присоединить некоторые обработчики к некоторым элементам, которые включают эту проверку.

function doSomething(e) {
  //do what needs to be done
}

function handleEvent(attachedHandler) {
  return function(e) {
     if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
      attachedHandler(e);
     } 
   };
}

$('#SomeElement').on('click keyup', handleEvent(doSomething));

Дай мне знать, поможет ли это вам ...

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(function( $ ) {
 
    $.fn.clickOrKeyPress = function( callback ) {

      this.on('click keyup', function (e) {

        if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
          callback(e);
        }
          
      });
 
        return this;

    };
 
}( jQuery ));

Answer 5

Я еще не проверял это, но, может быть, вы можете сделать именованную функцию и передать ее с другим обратным вызовом обработчику событий? ...

Пример (не проверено!):

// Define the callback function somewhere
function clickKeyupCallback(e, callback) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
        return callback;
  }
}



$('#SomeElement').on('click keyup', clickKeyUpCallback(e, function() {
  // your normal code here
  
  
}));

// РЕДАКТИРОВАТЬ

Я понял, что именованная функция должна находиться здесь в другом месте, если вы хотите сделать это таким образом, и абстрагировать «если"часть.

другой пример:

// Define the callback function somewhere
function clickKeyupCallback(e, callback) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
    callback();
  }
}


$('#SomeElement').on('click keyup', function(e) {
  clickKeyupCallback(e, function() {
    // do what ever needs to be done

  });
});