不在母元素內選擇器

我需要console.log如果點擊了.overtitle，但不包括裏面的複選框。如果複選框被點擊，我只需要它被檢查/取消選中，沒有console.log。不在母元素內選擇器

這是我試過的，但它不起作用。點擊複選框激發console.log。

$('.overtitle').not('.checkpart').click(function() { 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'> 
 
    <input class='checkpart' type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

來源

2017-02-24 bonaca

如果你點擊複選框你也總是點擊.overtitle。這其中的一個解決方案是將點擊事件中檢查event.target

$('.overtitle').click(function(event){ 
 
    if(event.target.className == 'checkpart') { 
 
     return; 
 
    } 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'> 
 
<input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

來源

2017-02-24 09:41:54 caramba

即使世界幾個方法可以做到這一點。

首先，你可以使用e.target屬性來檢查哪些元素實際上點擊：

$('.overtitle').click(function(e) { 
 
    if (!$(e.target).is('.checkpart')) { 
 
    console.log('323'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

或者，你可以放置一個單獨的事件處理程序上停止事件傳播了複選框DOM：

$('.overtitle').click(function(e) { 
 
    console.log('323'); 
 
}); 
 

 
$('.overtitle .checkpart').click(function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

最後，你可以換一個label元素中的文本，而只重視該事件是：

$('.overtitle label').click(function(e) { 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" id="part" value="banner00"> 
 
    <label for="part">BANNERS</label> 
 
</div>

來源

2017-02-24 09:40:13

已解決。非常感謝。 – bonaca

防止事件使用冒泡到DOM樹的複選框event.stopPropagation()方法。

$('.overtitle').click(function() { 
 
    console.log('323'); 
 
}).find('.checkpart').click(function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

或檢查event.target元件（其傳播的情況下）是不復選框。

$('.overtitle').click(function(e) { 
 
    if ($(e.target).is(':not(.checkpart)')) 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

來源

2017-02-24 09:40:43

你必須寫的每兩個單獨的事件處理程序像

$(document).on('click','.overtitle',function(e) { 
    console.log('323'); 
}); 

$(document).on('click','.checkpart',function(e) { 
    e.stopPropagation(); 
});

的stopPropagation()防止任何事件處理程序該元素的父母元素將被執行

來源

2017-02-24 09:56:39

不在母元素內選擇器

回答

相關問題