Sometimes I have an image element equal the location of the mouse pointer. I had a hard time looking this one up. It might have to do with propagation?
For instance, this does not fire when an image element is the location of the mouse cursor, because it is blocking the other element:
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
console.log("event fired");
}
My image element inside the div is pretty simple:
<div id="playGrid" class="w">
<img id="stone" style="position:absolute;" src="graphics/redStone.png">
</div>
My cursor onmousemove event is set up like this:
document.getElementById("playGrid").onmousemove = function(event) {stoneCursor(event)};
function stoneCursor(e) {
const stone = document.getElementById("stone");
let xPosition;
let yPosition;
if(e){
xPosition = e.clientX - 100;
yPosition = e.clientY - 100;
stone.style.top = yPosition + 'px';
stone.style.left = xPosition + 'px';
}
}
How do I make stone ignore the click events so playGrid can still get the click?
