javascript - jQuery .on()语法和event.preventDefault()

假设我有以下代码行：

$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel);

指向函数：

function toggleComparisonPanel() {
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');
  $filters.toggle();
}

这在Chrome中有效，因为据我所知，它显然将事件附加到窗口，使它成为全局窗口。但是，Firefox要求将事件传递给函数。我尝试了这个没有成功：

$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel(event);

function toggleComparisonPanel(event) {
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');
  $filters.toggle();
}

甚至有可能发生这种情况，还是我唯一的选择将代码放入.on（）函数中的匿名函数中，例如以下代码？

$comparePanel.on('click', '.pills li:not(.active)', function(event){
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $quickSpecsTable.toggleClass('comparison-mode');
  $filters.toggle();
});

如果可能的话，我宁愿将事件处理程序和函数分开。除了说实话对我来说比较整洁外，可能没有太多原因，但是这样做很不错

最佳答案

您可以简单地在其他地方声明该函数，如下所示：

// declare event here, since you're using it here
function toggleComparisonPanel(event) {
    event.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    $quickSpecsTable.toggleClass('comparison-mode');
    $filters.toggle();
}


//                                                  just pass the function here
$comparePanel.on('click', '.pills li:not(.active)', toggleComparisonPanel);

关于javascript - jQuery .on()语法和event.preventDefault()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8533066/