PreventDefault不工作

Question

我试图在一些超链接上使用一个preventDefault操作来防止它们被激活，而不是调用一些ajax。然而，它似乎不起作用。

我使用的代码如下:我有以下代码：

    $("#" + container_id + " a[id^=read_more_link]").click(function(event){
        alert($(this).html());
        event.preventDefault();
});

现在有趣的是，警报框会触发，因此它肯定会注册单击事件，但是它似乎不识别preventDefault()调用。

我尝试了一个简单的测试，简化了我的代码，但它仍然不起作用：

<a id="read_more_link" data-article_id="1" href="news/1">Read More</a>

    $("#read_more_link").on("click", function(event){
        alert("test");
        event.preventDefault();
    });

警报框会触发，但是页面仍然跟随链接。

注意:如果我使用“返回假”，但不使用preventDefault，它就能工作。

Answer 1

给你!

function(e){
    e = e || window.event;
    e.preventDefault();    
}

小提琴：http://jsfiddle.net/rXCcB/2/

编辑:正如11684正确指出的那样，详细的解释将是有帮助的。

有些浏览器将e识别为一个window.event，它包含一个事件的所有信息；在本例中，是您试图操作的单击事件。其他几个浏览器没有，因此在函数的第一步发生的是在e定义上对所有浏览器进行规范化。最终的结果是，每次对e的引用都指向window.event，此时您可以安全地使用e.preventDefault()，因为您知道所有浏览器都完全理解您的意思。

Answer 2

似乎您正在阻止具有某些父链接的默认操作，那么您的选择器应该如下所示：

我的html是：

<p id='aaa'>
   <a id='read_more_link' href='#'>adf</a>
</p>

jquery：

var container_id = $('#aaa');
$("a[id^='read_more_link']", container_id).click(function(event) {
   alert($(this).html());
   event.preventDefault();
});

检查小提琴：http://jsfiddle.net/EEZEe/

看看这能帮到你吗。

Answer 3

至少有一个更简单的方法，也有一个更好的方法：

更容易：

$("#" + container_id + " a[id^=read_more_link]").click(function(){
    alert($(this).html());
    return false;
});

不需要使用事件参数，也不需要调用函数。

更好的是：

使用按钮而不是链接：

<p id='aaa'>
   <button id='read_more_link' type='button'>adf</button>
</p>

然后您就不会遇到这个问题，因为为这个事件创建了一个按钮。链接是为链接而创建的，而return false或preventDefault()则是解决办法，尽管它们可以工作。