在同一功能中处理点击和按键的优雅方式

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 语句抽象成一个单独的函数。只要我不必一遍又一遍地 copy/paste 同一行代码。

Answer 1

我还没有测试过这个，但也许你可以做命名函数并将它与另一个回调一起传递给事件处理程序？...

示例（未测试！）：

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

// 编辑

我意识到命名函数必须位于此处的不同位置，如果你想这样做并抽象 "if" 部分。

另一个例子：

// 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

  });
});

Answer 2

没看懂你说的"I have a bunch of places where I have to code the same functionality"是什么意思。但是根据我的理解，您想将一些处理程序附加到涉及此检查的某些元素。

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 3

<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 4

您将需要一个 if 条件来确认按下的键是否为回车。所以你不能完全摆脱那里的 if 条件。

但是你可以去掉多余的条件，比如你不需要检查事件类型是不是keyup因为我们知道如果事件不是click，它肯定是keyup 事件。

所以你可以把你的条件降低到

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

Answer 5

我的最终解决方案 - jQuery Event Extensions.

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

P.S。对于所有隐姓埋名的反对者——你们应该为自己感到羞耻。

在同一功能中处理点击和按键的优雅方式

An elegant way of handling click and keypress in the same function

javascript

jquery

jquery-events