Vue 는 chrome 44 에서 우연히 하위 요 소 를 클릭 하여 거품 을 일 으 킬 수 없 는 해결 방법 입 니 다.

6709 단어 vue거품 이 일다chrome44
머리말
회사 의 한 항목 은 대체적으로 이 렇 습 니 다.왼쪽 목록 은 왼쪽 목록 의 글 제목 을 클릭 하고 오른쪽 에 해당 하 는 내용 을 펼 칩 니 다.
현재 의 문 제 는 일부 고객 들 이 가끔 왼쪽 의 제목 에 나타 나 대응 하 는 오른쪽 내용 을 열 수 없 기 때문에 사람들 에 게 개선 하 는 것 은 바로'카드'이 고 움 직 이지 않 으 며 반응 이 없다 는 것 이다.
프로젝트 환경 을 대체적으로 소개 합 니 다.
chrome 44(사용자 클 라 이언 트 에 포장)
Vue 2.6.10
왼쪽 목록 레이아웃

목록 의 모든 녹색 사각형 은 vue 구성 요소 입 니 다.ListItem 이 라 고 하고 목록 의 구성 요 소 는 List 입 니 다.
코드 가 이렇게 생 겼 어 요.

// List.vue
<template>
 <div class="blue">
  <list-item v-for="item in dataList" :data="item" @click="handleClick">
 </div>
</template>
<script>
 export default {
  ...
  methods: {
   handleClick() {
    ...            
   }
  }
 }
</script>

// ListItem.vue
<template>
 <div class="green" @click="onClick">
  <div class="red circle"></div>
  <div class="red square">
   <div class="yellow square1"></div>
   <div class="yellow square2"></div>
  </div>
 </div>
</template>
<script>
 export default {
  ...
  methods: {
   onClick(e) {
    console.log('  ', e.target);
    this.$emit('click');
   }
  }
 }
</script>
우선 이 click 이 쓸데없는 짓 인지 아 닌 지 댓 글 을 달 지 마 세 요.왜 Lisit.vue 에 직접 쓰 지 않 았 습 니까?원래 의 항목 은 바로 이렇게 쓴 것 이다.그 중의 일부 논 리 는 내 가 간소화 했다.가장 중요 한 것 은 이것 이 우리 가 토론 하 는 중점 이 아니 라 는 것 이다.
위의 코드 에 따라 우 리 는 녹색 사각형 에서 클릭 하면 요청 글 의 내용 을 실현 할 수 있 습 니 다.실측 도 문제 가 없 지만 온라인 이후 일부 사용자 들 은'글 목록 점 이 움 직 이지 않 는 다(사실은@click.native="handleClick"호출 되 지 않 았 다'고 보고 했다.처음에 솔직히 말 하면 믿 지 않 았 다.이렇게 간단 한 논리 인 데 이때 vue 의 일반적인 조작 이 좋 은 가,어떻게 문제 가 있 을 수 있 겠 는가?
하지만 원 격 과 현장 확인 을 거 쳐 이런 문제 가 있 었 던 것 은 사실이다.
조사 결과 위의 그림 의 빨간색 동그라미 아래 를 클릭 하면 onClick 을 촉발 할 수 있 는 것 으로 나 타 났 다.사실은 이때 녹색 사각형 이라는 요 소 를 직접 눌 렀 습 니 다.즉,우 리 는 이벤트 에 연 결 된 div 에 직접 눌 렀 을 때 onClick 을 터치 할 수 있 습 니 다.우리 의 첫 번 째 반응 은 이
우 리 는 click 을 제외 한 다른 사건 의 영향 을 의심 합 니 다.예 를 들 어 mousedown,mouseup 이 거품 을 막 았 습 니 다.사건 을 캡 처 하고 거품 을 막 는 상황 이 있 는 지,제거 한 후에 일부 가 있 는 것 을 발 견 했 습 니 다.차라리 잘못 죽 이 고 누설 하지 않 는 다 는 원칙 에 따라 저 희 는 이런 사건 에 대해 모두 조정 을 했 습 니 다.그러나 이 문 제 를 정말 해결 하 였 는 지 여 부 는...우 리 는 이 문제 로 인해 우리 개발 자 들 이 현지,테스트 인원 들 이 테스트 환경 과 생산 환경 에서 모두 재현 할 수 없다 는 것 을 몰 랐 다.매번 에 판 을 보 낼 때 만 조금씩 변경 할 수 있 습 니 다.변경 하 는 전 제 는 잘 고 칠 수 있다 는 보장 이 없 지만 반드시 고 칠 수 있 습 니 다.고객 의 신문 장벽 에 직면 하여 우 리 는 그들 에 게 임시 적 인 해결 방안 을 사용 하 라 고 할 수 밖 에 없고 빨간색 동그라미 아래 의 그 구역 을 클릭 하 라 고 할 수 있 습 니 다.
한 번 은 빨간색 동그라미 와 빨간색 테두리 에 같은 사건 을 연결 하 는 것 을 추 가 했 습 니 다.즉,

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
   google_ad_client: "ca-pub-3013839362871866",
   enable_page_level_ads: true
  });
</script>

// ListItem.vue
<template>
 <div class="green" @click="onClick">
  <div class="red circle" @click="onClick"></div>
  <div class="red square" @click="onClick">
   <div class="yellow square1"></div>
   <div class="yellow square2"></div>
  </div>
 </div>
</template>
예,우 리 는 클릭 사건 을 묶 을 뻔 했 습 니 다.우리 너무 어려워...
이렇게 접속 한 후에 도 여전히 문제 가 있 으 니,모두 가 예상 해 야 한다.만약 그 사용자 들 이 점 을 찍 었 다 면.onClick -> handleClick와<div class="yellow square1">에 서 는 여전히 onClick 을 촉발 할 수 없습니다.프로그래머 로 서 우 리 는 모든 div 에 같은 사건 을 연결 하 는 것 을 용납 하지 않 습 니 다.우 리 는 이러한 변경 을 포기 하고 존엄 한 프로그래머 가 되 었 습 니 다.그렇지 않 습 니까?
사용자 가'클릭 하지 않 음'이 발생 했 을 때 우리 실체 가 보 러 갔 을 때 발견:
1.디 버 깅 도구 에서 dom 에 연 결 된 모든 이 벤트 를 제거 합 니 다.연 결 된
이벤트 만 유지 합 니 다.사용 자 는 여전히"점 을 누 르 지 않 습 니 다".빨 간 동그라미 만 누 르 면 onClick 을 실행 할 수 있 습 니 다.
2.우 리 는 콘 솔 에서 document.query Select('yellow.square 1').click()을 사용 하 는 방식 은 onClick 을 촉발 할 수 있 습 니 다.즉,이 클릭 사건 은 사실
에 거품 을 일 으 킬 수 있 습 니 다.
왜 우 리 는 마우스 로 클릭 하면 안 되 는 지,그리고 우리 가 클릭 한 요 소 를 제어 하 는 것 을 통 해 우 리 는 우리 가 마우스 로 클릭 한 것 이<div class="yellow square2">에 대응 하 는 이 요소 라 는 것 을 100%확인 할 수 있다.
이 발견 은 우리 의 인식 을 완전히 전복 시 켰 다.도대체 뭐 가 틀 렸 어?Vue 든 브 라 우 저 든 다 큰 놈 들 이 야.틀 렸 어?다른 사람들 은 모두 사용 하고 있 습 니 다.모두 문제 가 없습니다.그리고 이 문 제 는 재현 할 수 없습니다.절차 가 필요 하지 않 습 니 다.버튼 엘 프 를 사용 하여 사용 자 를 모 의 한 것 은 하루 도 재현 되 지 않 았 습 니 다.어떻게 다른 사람과,모두들 네가 이렇게 간단 한 문제 도 정 하지 못 한다 고 생각 할 뿐 이 니?코드 도 전단 동료,전단 사내 에 게 리 뷰 를 많이 해 주 었 으 니 문제 가 없 군요.하지만 생산 적 으로 누군가가 사용 할 때'점 부동'이 나타 나 는 것 은 사실이다.
브 라 우 저 는 전단 의 기반 입 니 다.저 희 는 Vue 의 문제 라 고 대담 하 게 의심 할 수 밖 에 없습니다.또는 저희 의 용법 에 문제 가 있 거나 이 버 전의 Vue 는 이 버 전의 Chrome 44 가 일부 장면 에서 문제 가 있 습 니 다.
vue event propagation 과 관련 된 내용 을 검색 한 결과 작은 발견 이 있 었 습 니 다.이전에 Vue 2.4.2 가 하위 요소 사건 의 거품 과 관련 된 issue 를 반영 한 사람 이 있 었 고 vue 의 소스 코드 에 도 관련 된 주석 이 있 었 습 니 다.

위 에서 언급 한'#6566 issue'는 우리 의 문제 와 똑 같은 것 이 아니 지만 이런 bug 를 언급 한 적 이 있 으 니 우 리 는 Vue 의 문제 일 수도 있다 고 믿 을 수 있다(또는 우리 가 잘못 사용 했다 고 말 할 수도 있다).
마지막 으로 우 리 는 Vue 로 쓴 클릭 이벤트 의 작성 을 포기 하고 jQuery 로 바 꾸 기로 했다.
위 목록 의<div class="yellow square1">에 사건 을 연결 한 다음 에 해당 하 는 글 id 에 따라 해당 하 는 글 을 여 는 목적 을 실현 합 니 다.이 부분 은 기술적 인 함량 이 없 으 므 로 자세히 말 하지 않 겠 습 니 다.
네,결국 우 리 는 이 문 제 를 찾 는 원인 을 포 기 했 습 니 다.사용자 의 빈번 한 신문 장벽 에 직면 한 데다 가 우 리 는 문 제 를 재현 할 수 없어 서 고 쳤 는 지 모 르 겠 습 니 다.우 리 는 생산 에 있어 서 사용자 에 게 테스트 를 도와 달라 고 자주 발표 할 수 없습니다(테스트 인원 이 첫 번 째 로 대답 하지 않 음).
이것 이 도대체 해결 되 었 는 지 없 는 지 이론 적 으로 문제 가 없 을 것 이다.그러나 우리 가 말 한 것 은 인정 하지 않 는 다.고객 이 아직 이런 장애 가 있 는 지 없 는 지 를 보면 그들 에 의 해 검증 되 어야 한다.
이상 한 문제 가 입문 에서 포기 에 이 르 기 까지 우 리 는 마침내 Vue 를 우리 가 싫어 하 는 모습 으로 철저하게 사용 했다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.
axios 중복 쓸모없는 요청 을 취소 하 는 방법
위 챗 애플 릿 크로스 페이지 전달 데이터 방법 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage