阻止禁用按鈕內的圖標觸發點擊？

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