vue 의 사건 을 재인 식 하여 거품 의 실현 을 저지 하 다.

거품 의 표현
최근 에 vue 로 하나의 수 요 를 만 들 었 습 니 다.아마 같은 구역 일 것 입 니 다.서로 다른 위 치 를 클릭 하면 서로 다른 응답 함수 가 있 고 전체적인 응답 함수 도 있 습 니 다.좋 습 니 다.다음 그림 과 같 습 니 다.

그들의 DOM 구 조 는 다음 과 같다.

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click="handleClick1"></div>
  </el-col>
  <el-col @click="handleClick2">
  </el-col>
</div>   

거품 이 여기 서 나타 나 는 것 은 사용자 가 그림 에서 이벤트 1 이나 이벤트 2 구역 을 클릭 하면 이벤트 3 도 실 행 됩 니 다.이 는 시간 거품 메커니즘 으로 인해'handle Click 1'을 클릭 할 때'handle Click 3'도 응답 하기 때문이다.대부분의 경우 이것 은 희망 하지 않 는 것 이 고,마찬가지 로 나 에 게 도 희망 하지 않 는 다.
거품 의 명장 면 을 보 여 드릴 게 요.아니면...

그림 속 4,5,6,7 단 계 는 거품 단계 다.
통용 해결 방법
사건 이 터 졌 잖 아,그럼 사건 이 터 지 는 것 을 막 지.브 라 우 저 에 따라 사건 의 거품 을 막 는 방법 이 다 르 기 때문에 사건 의 거품 을 막 는 방법 을 손 으로 쓰 는 것 을 권장 합 니 다.

function stopPropagation(event){
  var e=arguments.callee.caller.arguments[0] || event;//       IE event             
  if(window.event){    //  IE   
    e.cancelBubble=true;
  }else if(e && e.stopPropagation){   //       
    e.stopPropagation();//      
  }
}

<button onclick="stopPropagation(event)">    </button>  //   

해결 방법
상기 호 환 방법 은 이벤트 와 거품 을 멈 추 는 방법 에 대해 모두 호 환 되 었 다.그러나 vue 에 서 는 내 연 구문 프로세서 에서 원본 DOM 이벤트 에 접근 해 야 합 니 다.특수 변 수 를 사용 할 수 있 습 니 다$event그것 을 전송 하 는 방법 입 니 다.예:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
 Submit
</button>

// ...
methods: {
 warn: function (message, event) {
  //               
  if (event) event.preventDefault()
  alert(message)
 }
}

따라서 우 리 는 상술 한 거품 을 멈 추 는 방법 을 간소화 할 수 있다.

function stopPropagation(event) {
  if(event) {
    event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
  }
} 

evnet 는$이벤트
vue 에서 거품 처리 표준 자세
이벤트 수정자
Vue.js 는 v-on 에 이벤트 수식 자 를 제공 합 니 다.수식 자 는 점 에서 시작 하 는 명령 접미사 로 표 시 됩 니 다.이 사건 들 의 장식 부 호 는 주로 다음 과 같은 몇 가지 가 있다.

stop

prevent

capture

prevent

self

once

passive

봤 어?첫 번 째'stop'이 우리 가 원 하 는 거 야!
이 수식 부 는 바로 이 문제 들 을 해결 하기 위해 생 긴 것 이다.그 러 니까 우 리 는 템 플 릿 에 이렇게 쓰 면 거품 이 멈 춘 다 는 거 야.

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click.stop="handleClick1"></div>
  </el-col>
  <el-col @click.stop="handleClick2">
  </el-col>
</div> 

완벽 합 니 다.이 는 사건 응답 논리 에서 dom 사건 의 세부 사항 을 처리 할 필요 가 없습니다.
거품 을 제외 하고 vue 가 제공 하 는 수정자 에는 이런 기능 도 있다.

<!--            -->
<a v-on:click.stop="doThis"></a>

<!--            -->
<form v-on:submit.prevent="onSubmit"></form>

<!--         -->
<a v-on:click.stop.prevent="doThat"></a>

<!--       -->
<form v-on:submit.prevent></form>

<!--                  -->
<!--                 ，              -->
<div v-on:click.capture="doThis">...</div>

<!--     event.target                -->
<!--               -->
<div v-on:click.self="doThat">...</div>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.