事件傳播不會像標準html那樣發生

我知道反應使用自己的合成實現事件。然而，在我看來，他們不完全像標準的HTML，這是一個問題。在我的情況下，我有一個複選框，是一些img標籤的兄弟。有兩個img標籤，一個用於表示已選中，另一個未選中。我有一些CSS樣式，當複選框處於未選中狀態時，顯示無顯示。試圖讓這個HTML/CSS與反應工作很難。看起來，點擊事件不會傳播到具有反應組件的複選框兄弟，儘管它從標準html起作用。請注意，由於存在一些混淆，我知道這種不反應的版本是使用css而不是事件。但我試圖實現一個同樣的事情的反應平衡版本，並期待正常的HTML事件傳播行爲 - 我沒有看到。還要注意複選框是標籤的兄弟。它也是透明的，所以用戶從未真正點擊他們點擊img標籤的複選框。事件傳播不會像標準html那樣發生

.checkbox-image input[type="checkbox"] + label img.selected { 
    display: none; 
} 

.checkbox-image input[type="checkbox"] + label img.unselected { 
    display: block; 
} 

<div class="checkbox-image"><input id="portfolio-standard-dev" type="checkbox" data-name="PortfolioStandardDeviation"><label for="mp-chart3"><img class="unselected" src="/images/img-843599.png"><img class="selected" src="/images/img-1b9f30.png"><span>Portfolio Standard Deviation</span></label></div>

來源

2016-12-02 David Choi

CSS與事件無關。事件傳播不會影響您的樣式。當用戶選中/取消選中複選框並手動更新圖像的類時，您必須進行處理。

或者你可以嘗試以下的純CSS：

.checkbox-image input[type="checkbox"]:checked + label img { 
    display: none; 
} 

.checkbox-image input[type="checkbox"] + label { 
    display: block; 
}

來源

2016-12-02 14:50:34 Thomas

事件傳播不會像標準html那樣發生

回答

相關問題