Question

我正在写一个函数：

(function($) {
    $.fn.openBox = function(theId) {
    // do something
    };
})(jQuery);

和几个调用我的函数的链接：

<a href="#" onclick="$(this).openBox('#theBoxId');">Open the box !</a>

我知道我可以使用 返回false 来阻止默认行为：

<a href="#" onclick="$(this).openBox('#theBoxId'); return false">Open the box !</a>

但是我想把它放在我的jQuery函数中...... 我已经使用event.target进行了测试，但它似乎无法正常工作......

Answer 1

您可以在return false;插件中openBox，并在onclick属性中返回的值;

(function($) {
    $.fn.openBox = function(theId) {
        return false;
    };
})(jQuery);

然后：

<a href="#" onclick="return $(this).openBox('#theBoxId');">Open the box !</a>

然而，这远非理想的远。 jQuery预计是可链接的;但是，通过返回false而不是this，您将无法再执行：$('foo').openBox().trigger('change')等。

要做的事情是附加事件the jQuery way，捕获the event object并致电preventDefault()：

jQuery.fn.openBox = function (id) {
    return this.on('click', function (e) {
        e.preventDefault();

        // now open your box `id`.
    });
}

$('a').openBox('#theBoxId');

Answer 2

不要在元素中使用onclick，而是将选择器放在数据属性中：

<a href="#" data-openbox="#theBoxId">Open the box !</a>

然后为包含该数据的所有链接绑定click事件：

$(function(){
  $('a[data-openbox]').click(function(e){
    e.preventDefault();
    var selector = $(this).data('openbox');
    // do something
  });
});

演示：http://jsfiddle.net/Guffa/EjLsQ/

Jquery onclick防止默认行为

2 个答案: