javascript - Return false with onclick attribute

Question

I have this code:

<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>

I want to prevent the default action alert() when click in <li> with text "a", and I use this code:

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

But this doesnt work: http://jsfiddle.net/Trk6W/10/

Is there a solution only modifying the 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

这种方法的问题是，如果内容是动态添加的，则必须调用转换点击的代码。

Answer 2

除了唯一的 id 警告，只需删除onclickattr：

标记：

<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>

JS：

$('.foo').map(function(){ 
  if($(this).text() == 'a')
    $(this).removeAttr('onclick')
});

Answer 3

您可以class为重复的元素设置 a，并使用以下代码段：

<ul>
    <li class="foo">a</li>
    <li class="foo">b</li>
    <li class="foo">c</li>
</ul>
<script>
    $('.foo').on('click',function(){
        if($(this).text() === 'a'){
            return false;
        }
        // Whatever you want here.
    });
</script>