I have the following code, where an image and an input field is enclosed in a div, and I used the @panzoom/panzoom package to implement the pan-zoom effect.
As in this example, the input field is not responsive and I cannot click and type in it. I think the @panzoom/panzoom package may have changed the default pointer action when mouse hover over the input, I attempted to reset the input tag with “pointer-events: auto” but it still does not work.
const pz = document.getElementById('panzoom');
console.log(pz)
const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black;">
<div id="panzoom" style="width:300px; height:300px; border: 10px solid black;">
<img style="width:250px; height:250px; " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"/>
<input type="text" placeholder="Click to enter" style="pointer-events: auto"/>
</div>
</div>