Question

我有很多地方需要为点击和 ENTER 按键（键盘）编写相同的功能。我最终写这样的事件处理程序：

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

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

您需要一个if条件来确认是否输入了按键。所以你不能完全摆脱那里的条件。

但你可以摆脱多余的条件，就像你不需要检查事件类型是否为keyup，因为我们知道事件不是click，它肯定是一个{ {1}}事件。

所以你可以减少你的状况

keyup

Answer 3

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

创建特定于ENTER键的jQuery事件扩展。

$.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。对于所有隐姓埋名的贬低者 - 你应该为自己感到羞耻。

Answer 4

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

示例（未测试！）：

＆＃13;

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

＆＃13;

//编辑

我意识到如果你想这样做，那么命名函数必须放在不同的地方并抽象出＃34; if＆＃34;一部分。

另一个例子：

＆＃13;

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

＆＃13;

Answer 5

我没有清楚地理解你的意思＆＃34;我有很多地方需要编写相同的功能＆＃34;。但根据我的理解，您希望将一些处理程序附加到涉及此检查的某些元素。

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

lemme知道它是否对你有帮助......

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

5 个答案: