How to propagate event from element with higher z-index to elements under excluding click event?

user_9186426 0
Viewed 185

I have a component which has markers in it. Marker is a styled div with icon. Markers have click, mouseenter and mouseleave events. When mouse enters tooltip appears. On top of markers I can place other element to cover them. That element has higher z-index. I still want to be able to hover over (mouseenter, mouseleave) over lower z-index elements (markers) while preventing click event on them when they are covered. Is there any solution to pass only few or exclude only some event from propagation on higher z-index element?

reactjs html javascript
1 Answers

<!DOCTYPE html>
<style>
    #elmHigherZindexID {
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: chartreuse;
        z-index: 1000;
    }
    #elmLowerZindexID {
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: cornflowerblue
    }
</style>
<body>
    <div id="elmHigherZindexID">HIGH</div>
    <div id="elmLowerZindexID">LOW</div>
</body>
<script>
    let highElmRef = document.getElementById('elmHigherZindexID');
    let lowElmRef = document.getElementById('elmLowerZindexID');
    highElmRef.addEventListener('click', highEventHandler);
    highElmRef.addEventListener('mouseenter', highOtherEventHandler);
    lowElmRef.addEventListener('mouseenter', lowEventHandler);
    function highEventHandler(event) {
        event.stopPropagation();
        console.log('high', event);
    }
    function highOtherEventHandler(event) {
        event.stopPropagation();
        console.log('high', event);
        const cusEvent = new MouseEvent('mouseenter', {
            view: window,
            bubbles: true,
            cancelable: true
        });
        lowElmRef.dispatchEvent(cusEvent);
    }
    function lowEventHandler(event) {
        event.stopPropagation();
        console.log('low', event);
    }
</script>
</html>

user_165128070
Related