javascript - 防止禁用按钮内的图标触发点击？

Question

试图找出正确的方法来使点击事件不会在禁用链接的图标上触发。问题是当您单击图标时，它会触发单击事件。我需要选择器包含子对象(我认为)，以便在启用链接时单击它们会触发事件，但在禁用父对象时需要排除子对象。

链接在页面加载后动态设置禁用属性。这就是我使用 .on 的原因

此处演示:(新链接，忘记将链接设置为禁用)

http://jsfiddle.net/f5Ytj/9/

<div class="container">
    <div class="hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
        <p>
            <a class="btn" disabled>
                <i class="icon-file"></i>
                Test
            </a>
        </p>
    </div>
</diV>​

$('.btn').on('click', ':not([disabled])', function () { alert("test"); });​

更新: 我觉得我没有使用 .on ，因为它没有考虑 $('.btn') ，只搜索子事件。所以我发现自己在做类似 $('someParentElement').on 或 $('body').on 的事情，其中​​一个更难以维护，因为它假设元素出现在特定的上下文中(有人移动了链接，现在 JavaScript 中断了)，我认为第二种方法效率低下。

这是在启用/禁用场景下都能正常工作的第二个示例，但我觉得必须首先选择父元素真的很糟糕，因为如果有人重新排列页面布局，该事件将会中断:

http://jsfiddle.net/f5Ytj/32/

Answer 1

如果您只想监听 .btn 元素本身的点击，请不要使用事件委托(delegate):

$('.btn').on('click', function() { 
    if (!this.hasAttribute("disabled"))
        alert("test");
});​

如果您要使用事件委托(delegate)，则按钮需要是匹配的元素:

$(someParent).on('click', '.btn:not([disabled])', function(e) {
    alert('test!!');
});​

• Demo

或者使用真正的按钮，它确实可以被禁用:

<button class="btn" [disabled]><span class="file-icon" /> Test</button>

• Demo , disabled .

在这里，禁用时根本不会触发任何点击事件，因为它是一个正确的表单元素而不是一个简单的 anchor 。只需使用

$('.btn').on('click', function() { 
    if (!this.disabled) // check actually not needed
        this.diabled = true;
    var that = this;
    // async action:
    setTimeout(function() {
        that.disabled = false;
    }, 1000);
});​