排列元件點擊優先

我有以下代碼：（的jsfiddle：https://jsfiddle.net/cjpLa44m/2/）排列元件點擊優先

<style> 
body, 
html { 
    width: 100%; 
    height: 100%; 
    border: 0; 
    padding: 0; 
    margin: 0; 
    overflow: hidden 
} 

.everything { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 

} 
.mainImg img { 
    width: 100%; 
    height: 100%; 
} 
.mainImg { 
    width: 50vh; 
    height: 50vh; 
    position: relative 
} 
#canvas{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
</style> 

<div class="everything"> 
    <div class="mainImg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png"></div> 
</div> 

<script> 
var canvas  = document.createElement("canvas"); 
var width  = innerWidth; 
var height  = innerHeight; 
var ctx  = canvas.getContext('2d'); 
canvas.width = width; 
canvas.id = "canvas"; 
canvas.height = height; 

ctx.fillStyle = "green"; 
ctx.fillRect(0,0, 50, 50); 
ctx.fillRect(width/2, height/2, 50, 50); 

window.onload = function() { 
    document.body.appendChild(canvas); 
    document.body.style.margin = "0"; 
    document.body.style.overflow = "hidden";  
}; 

canvas.onclick = function(){ 
    alert("Canvas called, although it shouldn't"); 
} 

var smile = document.getElementsByClassName("mainImg")[0]; 
smile.onclick = function(){ 
alert("i should be called"); 
} 
</script>

我有其在所述瀏覽器爲中心的圖像，以及畫布其上的絕對位置，在整個屏幕上擴展。關於顯示，畫布的顯示優先於圖像，這就是我想要的，因爲我使用畫布的一些transperent部分來顯示圖像。

問題在於點擊優先級：正如你所看到的，當你點擊笑臉圖像時，畫布的點擊函數被調用，因爲它在整個屏幕上傳播。但就點擊優先級而言，我希望我的圖像被調用。可以做到嗎？

謝謝你的時間，我很感激。

來源

2017-07-01 RunningFromShia

您可以在畫布上添加一個新元素，接受點擊。 –

在你的小提琴中，我永遠不會觸發simle.onclick，即我總是隻從canvas.onclick – emanek

emanek得到警報，這就是我正在談論的問題...請再次閱讀我的線程。亞歷山大 - 我不太明白，對不起。 – RunningFromShia

如果添加pointer-events: none;你#canvas規則，它會通過通過點擊圖像

Updated fiddle

來源

2017-07-01 13:48:21 LGSon

工程就像一個魅力，你能告訴我爲什麼嗎？謝謝 – RunningFromShia

@RunningFromShia當您點擊單詞_pointer-events_時，通過鏈接更新了我的答案，但簡單地說，'pointer-events：none'從元素中移除了鼠標事件，因此它的行爲就像它甚至不存在。 – LGSon

的事件可以爲你的形象和在單獨的無關元素在畫布上沒有泡沫。如果將畫布放置在與圖像相同的包含元素中，則單擊事件將從一個泡泡到另一個泡泡

此外，您最好使用addEventListener而不是直接將事件偵聽器分配給onclick屬性。

在HTML

<div class="everything"> 
    <div class="mainImg" id="contain"> 
     <img src="smile.png"> 
    </div> 
    <!-- this is where the canvas will go --> 
    <div id="canvasContainer"></div> <!-- add this div to hold the canvas --> 
</div>

然後，當您添加的畫布將它添加到容器中，而不是document.body然後添加事件偵聽器。

window.onload = function() { 
    document.getElementById("canvasContainer").appendChild(canvas); 
    var smile = document.getElementsByClassName("mainImg")[0]; 
    smile.addEventListener("click",imageEvent); 
    canvas.addEventListener("click",canvasEvent,true); // last arg true to capture the event (ie get it first) 
};

當你做到這一點，你想要的畫布獲取事件首先你必須在事件捕獲標誌設置爲true。

canvas.addEventListener("click",canvasEvent,true); // last argument true

，如果你把它設置爲false

canvas.addEventListener("click",canvasEvent,false); // last argument false 
// or 
canvas.addEventListener("click",canvasEvent); // or defaults to false

然後將圖像元素（畫布下）將首先獲得該事件。

事件偵聽器的

function imageEvent(e){ alert("Image") } // not much to do 
// the canvas event you need to either prevent the event bubbling 
// or let it through depending on what your needs are. 
function canvasEvent(e){ 
    if(/*only for canvas */){ 
     alert("Canvas handling it"); 
     e.cancelBubble = true; 
    }else{ 
     alert("Canvas is passing the event onto the image"); 
    } 
};

來源

2017-07-01 13:52:24 Blindman67

排列元件點擊優先

回答

相關問題