JS实现通过双指捏合，对div进行放大缩小

demo

<div id = "content">我是需要放大缩小的盒子</div>

JS代码：

const content = document.querySelector('#content'); //获取需要放大缩小的盒子
        let firstDistance = 0; // 存放手指开始放上的时，两根手指之间的距离
        // 缩放事件的处理
        const getDistance =  (start, stop) => { //计算两根手指之间的距离
            return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
        };
        content.addEventListener('touchstart', function (event) { // 获取第一次触摸的点
            const touches = event.touches;
            if(touches.length > 1){ //判断是否是两指
                const events1 = touches[0];
                const events2 = touches[1];
                const one = {
                    x:events1.pageX, //第一根手指的横坐标
                    y:events1.pageY, //第一根手指的纵坐标
                }; //第一根手指的横坐标
                const two = {
                    x:events2.pageX, //第二根手指的横坐标
                    y:events2.pageY, //第二根手指的纵坐标
                }; 
                firstDistance = getDistance(one,two);
            }
            event.preventDefault();
        });
        document.addEventListener('touchmove', function (event) {
            event.preventDefault();
            const touches = event.touches;
            if(touches.length>1){
                const events1 = touches[0];
                const events2 = touches[1];
                const one = {
                    x:events1.pageX, //第一根手指的横坐标
                    y:events1.pageY, //第一根手指的纵坐标
                }; //第一根手指的横坐标
                const two = {
                    x:events2.pageX, //第二根手指的横坐标
                    y:events2.pageY, //第二根手指的纵坐标
                }; 
                const distance = getDistance(one,two);
                const zoom = distance / firstDistance
                content.style.transform = 'scale('+ zoom +')';
            }
        });