Question

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

在页面加载后动态链接获取禁用属性集。这就是我使用.on

的原因

在此演示：（新链接，忘记设置已停用的链接）

<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"); });

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

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

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

Answer 1

.on('click', ':not([disabled])'

^这意味着，由于图标是按钮".btn"的子项，并且未禁用，因此该函数将执行。

同时禁用图标，或仅将事件监听器应用于您的按钮<a>标记，或使用e.stopPropagation();

~~我建议使用e.stopPropagation();，这样可以防止图标响应点击。~~

这对我来说似乎不起作用^

然而，

Disabling the icon确实如此。

Answer 2

您没有正确使用选择器。

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

See it live here.

修改

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

Answer 3

我希望在此处使用委托添加事件，因为您尝试根据元素的属性来确定事件的基础。

您可以添加检查条件，以查看是否要运行代码。

$('.container').on('click', '.btn', function() {
    if( $(this).attr('disabled') !== 'disabled'){
        alert('test!!');
    }
});

<强> Check Fiddle

Answer 4

如果您只想听取.btn元素本身的点击，请不要使用事件委托：

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

如果您使用事件委托，则该按钮必须是匹配元素：

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

Demo

或使用真正的button，可以真正禁用：

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

Demo，disabled。

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

$('.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);
});

Answer 5

我认为你需要的是：

e.stopPropagation();

请参阅：http://api.jquery.com/event.stopPropagation/

Answer 6

基本上类似下面的内容应该有效

$('.icon-file').on('click', function(event){event.stopPropagation();});

您可能希望添加一些逻辑，以便仅在禁用按钮时停止冒泡。

<强>更新

不确定，但这个选择器应该有效：

$('.btn:disabled .icon-file')

阻止禁用按钮内的图标触发点击？

6 个答案: