使用onclick属性返回false

Question

我有这个代码:

<ul>
    <li class="foo" onclick="alert('Hello')">a</li>   
    <li class="foo" onclick="alert('Hello')">b</li>
    <li class="foo" onclick="alert('Hello')">c</li>
</ul>

我想alert()在单击<li>文本"a" 时阻止默认操作,我使用此代码:

$(document).on('click','.foo', function(){
    if ($(this).text()=='a')
        return false;
});

但这不起作用:http://jsfiddle.net/Trk6W/10/

有没有只修改javascript的解决方案？

Updated: I dont wanna remove the attribute onclick because the values of li can change

Answer 1

这里的问题是jQuery代码在onclick属性之后运行.所以没有办法让它与你目前的设置方式一致.解决方案是查找onclick元素并将其移动到另一个事件,并使用动态触发的onclick而不是事件.

$(".foo").each( function() {
   this._onclick = this.onclick;
   this.onclick = null;
});


$(document).on('click','.foo', function(){
    if ($(this).text()!=='a') {
        this._onclick.apply(this,arguments);
    }
});

的jsfiddle

此方法的问题是,如果动态添加内容,则必须调用转换单击的代码.