Question

我想知道是否可以稍微清理这些点击事件：

$(document)
    .on('click', '.newGameItem', getNewGameItem)
    .on('click', '.startGame', startThisGame)
    .on('click', '.showThisGameInfo', showThisGameInfo)
    .on('click', '.closeThisGameInfo', closeThisGameInfo)
    .on('click', '#api_game_test', testApiGame)
    .on('click', '.nextGame', shiftGames)
    .on('click', '.confirm_cancel', cancelLexTimer)
    .on('click', '.completed_submission', reload)
    .on('turbolinks:load', function() { ... });

链中的前8个方法是点击事件 - javascript中有一种方法可以在一次点击下组合这些方法＆＃34;伞＆＃34;即使点击事件被委托给不同的元素

Answer 1

您可以使用单个.click并使用event参数检查点击的目标：

$(document).on('click', function (event) {
  var target = event.target;

  if ($(target).hasClass('newGameItem')) getNewGameItem();
  if ($(target).hasClass('startGame')) startThisGame();

  if (target.id == 'api_game_test') testApiGame();

  // etc
})

以下是关于jQuery event.target的文档（相当差）：api.jquery.com/event.target

Answer 2

你不会远离一大块某事，无论是.on还是GG's answer。您可以随时将其放在单独的.js文件中以将其分开，这样就不会使代码混乱。

// in addHandlers.js
function addHandlers(document) {
    document.on('click',...
}

这样可以清理你的代码，同时在你做有趣的事情的同时将所有非必要的混乱排除在外。

使用单击处理程序替换多个单击处理程序

2 个答案: