Javascript/React3 모바일 HTML 드래그, 제스처 뒤로가기, 앞으로 가기 방지 터치 디바이스에 html로 된 페이지를 띄워 키오스크를 개발하고 있다. edge webview 를 이용해서 띄우고 있는데, 좌우로 드래그 하면 앞으로가기, 뒤로가기 버튼이 나타난다. 그리고 아래로 드래그할 때는 페이지 새로고침이 된다. 필요없는 기능이기에 막아야했다. 그리고 덤으로 드래그 하면 화면이 당겨지면서 드래그 하는 방향으로 흰색 영역이 나타난다. 먼저 흰색 공간은 html { overflow: hidden; } 이렇게 해주면 더이상 나타나지 않는다. 그리고 새로고침, 앞으로 가기, 뒤로가기는 브라우저를 띄우고 edge://flags/ 로 들어가서 Overscroll history navigation, Pull-to-refresh gesture를 Disabled로 변경해주면 된다. Enable f.. 2021. 2. 17. 모바일에서 터치시 하이라이트 방지(a, img 등) React로 개발중인 모바일 페이지에서, 특정 영역을 터치할 때마다 하이라이트가 생겼다. 없애고 시켜서 구글링해보니 모바일 환경에서 a태그를 누르면 하이라이트가 생긴다고 한다. 그러고보니 특정 영역이 아니라 a태그 한정이었다. 아무페이지나 개발자도구를 열어 확인해보면 위와같이 a태그에 하이라이트가 생긴다. a 태그의 css에 다음 속성값을 주면 더이상 하이라이트가 나타나지 않는다. a { -webkit-tap-highlight-color:transparent;} 역으로 특정 색상을 주고 싶을 때도 이용할 수 있을 것 같다. 추가 a 태그 뿐 아니라 img 태그에도 하이라이트가 생기는 경우도 있었다. 이 경우도 동일하게 비활성화가 가능했다. a태그 한정은 아닌 듯. 2021. 2. 17. 두 손가락 터치 했을 때 도구창 방지 React js로 개발 중인 프로젝트가 있다. 터치 디바이스에서 웹으로 띄우게 되는데, 사용자 이벤트 중에 불필요한 것들을 막는 작업 중이었다. 마우스 우클릭을 한 것처럼 도구창이 뜨는 경우가 두 가지 정도 있었다. 첫번째로는 한 손가락으로 꾹 누르고 있다 뗐을 경우, 두번째는 두 손가락으로 가볍게 터치하고 뗐을 경우다. touchStart, touchEnd 이벤트를 잡아서 preventDefault를 먹이고, changedTouchs 프로퍼티를 확인하고 어쩌구 저쩌구 고군분투 했지만 이럴 필요가 없었다... onContextMenu 이벤트의 리스너를 만들어서 e.preventDefault를 해주면 꾹 누르든, 두 손으로 터치하든 해결 되는 거였다. 마우스 우클릭하면 뜨는 저거 이름이 Context Me.. 2021. 2. 1. 이전 1 다음
