按鈕點擊按鈕內容攔截的事件

我的頁面上有一個非常基本的Bootstrap按鈕。我有一個事件監聽器正在監聽點擊這個按鈕。我有一個圖像標籤作爲按鈕的內容。當用戶點擊按鈕時，事件監聽器根據需要觸發。但是，如果按鈕點擊落在按鈕內的圖像上，則圖像會攔截點擊並且按鈕點擊事件偵聽器不會觸發。我怎樣才能讓按鈕檢測點擊它本身及其內容（例如圖片標籤）？按鈕點擊按鈕內容攔截的事件

<button type="button" class="btn btn-custom" id="navLogoButtonLeft"> 
    <!-- dev tools indicate clicks land on this <img> and never make it to the <button> --> 
    <img class="icon" src="img/icon.png"> 
</button>

請注意，這是一個Twitter Bootstrap按鈕，但我不確定是否對此問題有任何影響。

這裏是JS，請求。

var navLogoButtonLeft; 

function initNav() { 
    navLogoButtonLeft = document.getElementById('navLogoButtonLeft'); 

    // note, I've tried both 'true' and 'false' here 
    navLogoButtonLeft.addEventListener('click', handleClick, true); 
} 

// this method does fire, but clickEvent is the <img>, not the <button> 
function handleClick(clickEvent) { 
    if(clickEvent.target == navLogoButtonLeft) { 
     // this line cannot be reached 
     window.location = './'; 
     return; 
    } 
} 

window.addEventListener('load', initNav, false);

來源

2016-08-16 Steverino

請發佈[mcve]，包括您的JavaScript – j08691

JavaScript與HTML不匹配。請閱讀@ j08691鏈接的頁面上的完整內容。 –

你的開發工具是正確的。當您點擊按鈕中的圖像時，事件目標實際上就是圖像。不過，點擊事件應該會起泡並最終讓按鈕的事件偵聽器觸發。

所以，如果你的HTML是正確的（在//意見例如將打破它），你正確添加事件監聽器就像

var btn = document.querySelector('#navLogoButtonRight'); 

btn.addEventListener('click', function (ev) { 
ev.stopPropagation(); 
console.log('Event listener for element ' + ev.currentTarget.nodeName + '#' + ev.currentTarget.id + ' fired.'); 
console.log('Clicked on ' + ev.target.nodeName); 
});

事件偵聽器應該火上點擊按鈕，以及在其任何子元素上。處理程序中的ev.stopPropagation();會阻止事件繼續冒泡。在這裏看到一個工作示例：https://jsfiddle.net/quj56hq5/

如果您必須設置pointer-events: none;才能正常工作，那麼您的代碼肯定有問題，或者某些Twitter Bootstrap JS受到阻礙。

更新

後，JS是由問題的作者加入了問題的真正原因表現。它是保持在單擊圖像時被執行，因爲.target一直是點擊的元素而.currentTarget總是聽者原本附着在單元處理程序的代碼行

if(clickEvent.targe‌t == navLogoButtonLeft) {

。

來源

2016-08-16 17:12:44 Oliver

謝謝，我會修復HTML註釋，這些只是爲這篇文章添加。 – Steverino

.stopPropagation（）不起作用，但值得一試。按鈕對象上的點擊事件在任何時候都不會觸發，無論是在註冊圖像點擊之前還是之後。點擊只發生在圖像上，並且DOM中的按鈕元素不會知道它或其任何子項上發生了點擊，除非我使用指針事件使圖像（子）不可點擊：無 – Steverino

請注意，我的代碼是100％包括的，所以如果有什麼問題，請告訴我可能是什麼。 – Steverino

您可以將相同的事件偵聽器添加到圖像標記以獲得所需的效果。

雖然你也可以去更多的技術水平並添加一個類，在CSS設置pointer-events: none;和類添加到您的img標籤結束

來源

2016-08-16 16:51:05 casualcoder

添加'pointer-events' CSS的確有用，謝謝。我有點擔心與舊版瀏覽器的兼容性，這是一個問題嗎？如果可能，我希望不要在更多DOM元素上覆制監聽器。 – Steverino

從我讀的它在Firefox 3中工作。6+，Chrome 2+，IE 11+和Safari 4+ – casualcoder

嘗試做逆（並使用泡沫效應），那麼試着讀心人應用到IMG（我的樣品中我簡單地改變相關的偵聽器ID的位置）

<button type="button" class="btn btn-custom" > 
    // dev tools indicate clicks land on this <img> and never make 
    // it to the <button> 
    <img class="icon" src="img/icon.png" id="navLogoButtonRight" > 
</button>

來源

2016-08-16 16:52:52 scaisEdge

圖像不會填滿整個按鈕，因此點擊按鈕時會發生什麼情況，但點擊不會落在圖像上？ – Steverino

@fts_acer。泡沫效應應該將效果發揮到父... ..試着讓我知道..或應用在兩個偵聽器.. – scaisEdge

按鈕點擊按鈕內容攔截的事件

回答

相關問題