Question

我正在创建一个函数，该函数将接收一个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'));

Answer 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值的原始函数（在我们的示例中，我们不需要任何特定的函数，所以我＆＃39 ; m传递null）和你给出的任何参数bind，后跟任何赋予绑定函数的参数。因此，我们将获取URL（来自bind调用），后跟事件对象（从调用处理程序时开始）。

Function#bind并不适用于像IE8这样的老式浏览器。如果你需要支持它们，jQuery的$.proxy做了类似的事情：

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

Answer 2

在调用您的方法时，如果您在调用时将event作为参数传递，则不会将事件作为参数与图像url .so一起传递。然后您的代码将起作用。谢谢

jQuery event.PreventDefault无法在用户定义函数中工作

2 个答案: