jQuery event.PreventDefault 在用户定义的函数中不起作用答案

【问题标题】：jQuery event.PreventDefault not working in User Defined FunctionjQuery event.PreventDefault 在用户定义的函数中不起作用
【发布时间】：2015-06-11 07:04:58
【问题描述】：

我正在创建一个函数，它将接收一个 URL，然后将该 URL 显示在一个灯箱中。我在我的函数中遇到了 event.preventDefault() 的问题，它说它不是错误控制台中的函数。

我尝试过将事件显式传递给函数，但这只是在页面加载时而不是在单击时运行函数

这是我的代码：

    // Function to display widget
    function displaySportsWidget(event, iframeURL) {
        // Prevent Default Event Handler
        event.preventDefault();

        // Build iFrame HTML
        var iframe = '<iframe src="' +  iframeURL + '" ></iframe>';         
        var html = iframe;

         // Inject HTML to Generate Widget
        $('.leagues-wrapper').html(html);

        // Display Overlay
        $('.leagues-overlay').css('display', 'block');
    };

    // Event handlers. Pass iFrame URL into function depending on link clicked
    $('.leagues-link.league-table').on('click', displaySportsWidget('http://www.example01.com'));
    $('.leagues-link.league-form').on('click', displaySportsWidget( 'http://www.example02.com'));

【问题讨论】：

当您需要将函数[未调用] 作为回调传递时，您正在调用函数（这会产生非函数结果）。
您可以将您的事件名称仅在参数中更改为 e 吗？我认为这与全局事件变量冲突。
@SimpleMan：这不是上面代码的问题。

标签： javascript jquery function events

【解决方案1】：

代码

$('.leagues-link.league-table').on('click', displaySportsWidget('http://www.example01.com'));

调用 displaySportsWidget 并将其返回值传递给on，与foo(bar()) 调用 bar 并将其返回值传递给foo 完全相同.

如果你想连接一个事件处理程序，你不调用它，你只是引用它。在您的情况下，您可以这样做：

$('.leagues-link.league-table').on('click', function(e) {
    displaySportsWidget(e, 'http://www.example01.com');
});

或者，如果您愿意更改 displaySportsWidget 中的参数顺序：

function displaySportsWidget(iFrameURL, event) {
    // ...
}

...那么你可以使用Function#bind:

$('.leagues-link.league-table').on('click', displaySportsWidget.bind(null, 'http://www.example01.com'));

Function#bind 创建一个新函数，在调用该函数时，会使用给定的this 值调用原始函数（在我们的例子中，我们不需要任何特定的值，所以我传递了null）和您给bind 的任何参数，然后是给绑定函数的任何参数。因此，我们将获取 URL（来自 bind 调用），然后是事件对象（来自调用处理程序时）。

Function#bind 不在像 IE8 这样的旧浏览器上。如果你需要支持它们，jQuery 的 $.proxy 会做类似的事情：

$('.leagues-link.league-table').on('click', $.proxy(displaySportsWidget, null, 'http://www.example01.com'));

【讨论】：

【解决方案2】：

在调用您的方法时，您不会将事件作为参数与图像 url 一起传递。因此，如果您在调用时将事件作为参数传递。那么您的代码将正常工作。谢谢

【讨论】：