JavaScript - releasePointerCapture() method

revision:


Category : element

The releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.

Syntax :

        releasePointerCapture(pointerId)
    

Parameters:

pointerId : The pointerId of a PointerEvent object.

Examples:

           
        

Practical examples

example: set the pointer capture on a <div> when you press down on it.
SLIDE ME
code:
                    <div>
                        <div id="slider">SLIDE ME</div>
                    </div>
                    <style>
                        div #slider{width: 14vw; height: 5vw; display: flex; align-items: center; justify-content: center; background: #fbe;}
                    </style>
                    <script>
                        function beginSliding(e) {
                            slider.onpointermove = slide;
                            slider.setPointerCapture(e.pointerId);
                        }
                        function stopSliding(e) {
                            slider.onpointermove = null;
                            slider.releasePointerCapture(e.pointerId);
                        }
                        function slide(e) {
                            slider.style.transform = `translate(${e.clientX - 70}px)`;
                        }
                        const slider = document.getElementById("slider");
                        slider.onpointerdown = beginSliding;
                        slider.onpointerup = stopSliding;
                                
                    </script>