selecto icon indicating copy to clipboard operation
selecto copied to clipboard

모바일에서 @click 이벤트 발생안함

Open Chloe-Bang opened this issue 1 year ago • 7 comments

Environments

  • Framework name: vue3
  • Framework version: ^3.2.38
  • Component name: vue3-selecto
  • Component version: ^1.8.2

Description

리스트 페이지에 체크 선택 버튼 대신 vue3-selecto로 선택 기능을 대신하고 리스트 아이템 하나를 클릭하면 라우터 이동을 하는 코드 작성 중, userAgent가 모바일 디바이스면 드래그 지정 영역 하위의 이벤트가 모두 동작하지 않는 걸 확인했습니다.

PC에서 동작하는 것과 동일하게 모바일에서도 동작되도록 수정 부탁드립니다. 동일한 코드는 아니지만 이해를 위해 같은 계층으로 만든 샘플 코드 첨부합니다.

PC:

  • dragContainer로 지정한 태그 안에 있는 @click="testClick" 이벤트 발생 > 정상 동작

PC 개발자 콘솔(모바일 디바이스 iPhoneX, iPad Mini..) :

  • @click="testClick" 이벤트 발생 안함 > 오동작

모바일(아이폰) :

  • @click="testClick" 이벤트 발생 안함 > 오동작 (개발자 콘솔과 같음)
  • body의 스크롤도 selecto로 지정한 영역 안에서는 동작안함
  • table의 좌우 스크롤 동작 안함

Sample Source

<vue-selecto 
  dragContainer='.drag-container'
  :selectableTargets='[".draggable-area .test-td"]'
/>
<table class='drag-container draggable-area'>
...//
  <tbody>
     <tr @click="testClick">
         <td class='test-id'></td>
      </tr>
   </tbody>
</table>

Chloe-Bang avatar Apr 19 '23 05:04 Chloe-Bang