在父級上觸發點擊事件，但防止兒童點擊事件

我有兩個事件綁定到兩個對象，一個在另一個內，具有相同的大小。我們稱之爲container和content。這兩個事件都發揮着不同的作用。 content上的事件是默認設置的，因爲我無法刪除它，所以我需要一種方法來防止它（或暫時取消設置）。在父級上觸發點擊事件，但防止兒童點擊事件

我想單擊它們只有與container相關的事件被觸發。是否可能。什麼是最好的辦法來實現它？

下面的例子。如果一切正常，單擊白色方塊應變成綠色，否則變成紅色。

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '#content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $('#content').addClass('green') 
 
    showClasses() 
 
    // Now stop!!! 
 
    // Don't run the click event on #content!!! 
 
} 
 

 
function goRed(event) 
 
{ 
 
    $('#content').addClass('red') 
 
    showClasses() 
 
} 
 

 
function showClasses() 
 
{ 
 
    $('#classes').html($('#content').attr('class')) 
 
}

#content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a id="content"></a> 
 
</div> 
 

 
<p id="classes"></p>

來源

2017-05-31 a.barbieri

使用'event.stopPropagation（）'來阻止事件冒泡到父母 – guradio

我想我正在尋找其他方法。阻止孩子直接進入父母。 –

如果我理解正確的話，這意味着''上content' click'處理器將永遠不會觸發。我對嗎？ – abhishekkannojia

正如你在你想停止某些條件goRed方法註釋中那麼做到這一點自己的函數中。

if(event.target.id=='content') return; // Add your condition here and return.

取而代之的是event.target.id=='content'條件檢查你的病情的，當你想它來執行。

UPDATE

您可以檢查此條件$(this).parent().is('#container')檢查，如果你的內容在裏面container。

代碼片段

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '.content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $(this).find('.content').addClass('green') 
 
} 
 

 
function goRed(event) 
 
{ 
 
    if($(this).parent().is('#container')) return; // Add your condition here and return. 
 
    $(this).addClass('red') 
 
}

.content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
#container{ 
 
    display: inline-block; 
 
    padding: 3px; 
 
    border:2px solid red; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a class="content"></a> 
 
</div> 
 

 
<a class="content"></a>

來源

2017-05-31 08:38:19

我正在尋找*通過*內容，所以廣場只獲得了綠色的功能。 –

@ a.barbieri然後你不想點擊任何內容？ –

什麼時候你想點擊內容被觸發？ –

一種選擇是使用CSS和應用上的內容pointer-events: none，但請記住，這將禁用該元素的所有指針事件。

來源

2017-05-31 08:33:41 Slim

由於澄清從你的意見，你不希望在content處理程序被執行，但你希望事件冒泡到父。在這種情況下，您可以停止content偵聽器函數本身的事件處理。（雖然我覺得你不應該有content聽衆，因爲在所有你不執行它）

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '#content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $('#content').addClass('green') 
 
    showClasses() 
 
    // Now stop!!! 
 
    // Don't run the click event on #content!!! 
 
} 
 

 
function goRed(event) 
 
{ 
 
    if(event.target.id === 'content') 
 
    return; 
 
    $('#content').addClass('red') 
 
    showClasses() 
 
} 
 

 
function showClasses() 
 
{ 
 
    $('#classes').html($('#content').attr('class')) 
 
}

#content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a id="content"></a> 
 
</div> 
 

 
<p id="classes"></p>

來源

2017-05-31 08:45:36 abhishekkannojia

'content'上的監聽器被設置在腳本的開頭，這就是我需要阻止它的原因，如果存在'容器'被'容器'包裝的情況。「容器」上的事件只有在出現這種情況時纔會設置。這就是爲什麼我有這個聽衆。 –

我不能接受兩個答案，但我投了你的票。再次感謝 –

您應該使用event.stopPropagation()防止事件的進一步執行該被解僱。這裏有一個工作演示可以幫助你：https://jsfiddle.net/uogt1tp7/

來源

2017-05-31 08:47:58

在父級上觸發點擊事件，但防止兒童點擊事件

回答

相關問題