모바일에서 이미지클릭만 되고 다운받기는 안되게 하고싶을때

            // 이미지 클릭 시 모달 열기 (이미지 저장 방지는 유지, 클릭은 가능하게)
            document.querySelectorAll('.gallery-media').forEach(image => {
                //image.style.pointerEvents = 'auto';  // 이미지 클릭 가능하게 설정
                image.style.touchAction  = 'none';

                image.addEventListener('touchstart', (event) => {
                    // 기본 이벤트 방지 (다운로드 방지)
                    event.preventDefault(); 
                    console.log('터치 이벤트 처리');
                    openModal(image.src, `${companyName}${postData.productNumber}`);
                });
                image.addEventListener('click', (event) => {
                    // 기본 이벤트 방지 (다운로드 방지)
                    event.preventDefault(); 
                    console.log('클릭 이벤트 처리');
                    openModal(image.src, `${companyName}${postData.productNumber}`);
                });      

                // 데스크탑에서 우클릭 방지
                image.addEventListener('contextmenu', function(e) {
                    e.preventDefault();  // 기본 동작 방지 (데스크탑)
                });

 
            });

터치와 클릭인데 둘중 어떤 것으로 실행될지는 동일한 브라우저에서도 그때그때 다를수있다 그래서

2개의 경우를 같이 적어주고

터치로 시작되던 클릭으로 시작되던 동일한 모달창이 열리게 한다음에

꾹 누르고 있을때 실행되는 다운받기 창의 이벤트를 막아버린다. 

중요한 점은 기본이벤트를 하는 저 코드이다.

event.preventDefault();

touchmove touchend 

drag 등등 많은데

기본적으로 클릭과 터치에서 잡아줘야하는경우가 많고
오픈소스 <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
같은 경우도 

div를 통으로 묶어서 제어해서 div 내부에 다른 버튼에 대한 event가 막히는 경우가 많다

 

이런 경우는 수월하게 이동되지만 

이런 경우 모바일의 환경에서는 삭제의 click이벤트가 뭉개지는 현상이 생긴다.