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

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

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

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

也可以禁用该图标，或者仅将事件侦听器应用于作为按钮的<a>标记，或者使用e.stopPropagation();

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

这似乎对我不起作用^

但是， 禁用图标即可 。

Answer 2

您没有正确使用选择器。

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

在这里看到它。

编辑：

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

Answer 3

我希望在此处使用委托添加事件，因为您尝试基于元素的属性建立事件。

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

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

检查小提琴

Answer 4

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

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

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

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

• 演示

或使用true button ，可以将其禁用：

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

• 演示 ， 禁用 。

在这里，禁用时根本不会触发click事件，因为这是一个适当的表单元素，而不是简单的锚点。 只需使用

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

您可能需要添加一些逻辑，以仅在禁用按钮ist时才停止对事件进行冒泡。

更新：

不确定，但是此选择器应该可以工作：

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