如何防止重疊YouTube視頻時點擊事件冒泡？

Question

當我將一個<div>注入到YouTube上的一個頁面中並且如果在<video>元素上定位，那麼發生在該<div>上的「點擊」事件仍然會向上傳播到視頻。這是一個問題，因爲連續兩次點擊可以在YouTube上觸發全屏模式，並且我想阻止該問題。

您可以使用下面的代碼進行測試。轉到YouTube上的視頻頁面，並確保HTML5視頻播放器處於活動狀態（右鍵單擊視頻並檢查下拉列表中是否顯示「HTML5」）。接下來，將下面的代碼粘貼到瀏覽器的控制檯中。視頻左上角會出現一個黃色框。現在，雙擊該框。視頻將全屏顯示。請注意，我如何嘗試防止在代碼中冒泡的「單擊」事件。我錯過了什麼？爲什麼「點擊」事件仍然激活全屏模式？

document.querySelector('.html5-main-video').insertAdjacentHTML('beforebegin', 
    '<div id="test123" style="position:absolute;top:0;left:0;width:100px;' 
    +'height:100px;background:yellow;z-index:1000000"><div>' 
); 
document.querySelector('#test123').addEventListener('click', function (e) { 
    console.log('Clicked'); 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
}); 

你可以在這個視頻測試：https://www.youtube.com/watch?v=vCYk9CRx0g8

Answer 1

您需要陷阱DblClick事件了。