Question

假设我有代码行：

$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();
});

如果可能的话，我宁愿保持我的事件处理程序和函数分开。除了说实话对我来说感觉比较整洁之外，可能没有太多理由，但这样做会很好

Answer 1

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

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

Answer 2

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

有明显的语法错误（缺少“）”）。把它固定到

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

会附加toggleComparisonPanel(undefined)的结果（假设此时没有event变量可见）。

你想成功

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

function toggleComparisonPanel(event) {
...
}

jQuery .on（）语法和event.preventDefault（）

2 个答案: