Vuejs 이벤트 한정자

Vuejs 이벤트 한정자

다음 문서는 다음과 같습니다.

@click.prevent.self모든 클릭을 방지합니다.@click.self.prevent요소 자체를 클릭하는 것만 방지합니다.

실제로 모든 클릭을 방지하기 위해 바이올린을 만들어 보았지만 성공하지 못했습니다.문서의 이 행이 실제로 무엇을 의미하는지 누가 자세히 설명해 줄 수 있나요?

바이올린:

var app = new Vue({
  el: '#appp',
  methods: {
    logger(arg) {
      console.log(arg);
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp">
  <div @click.prevent.self="logger('1')"> 1
    <br>
    <div @click.prevent.self="logger('2')"> ..2
      <br>
      <div @click.prevent.self="logger('3')"> ....3

      </div>
    </div>
  </div>
</div>

가장 좋은 방법 중 하나는.prevent그리고..selfinteract는 Vue 컴파일러의 출력을 보고 있습니다.

.prevent.self:

on: {
    "click": function($event){
        $event.preventDefault();
        if($event.target !== $event.currentTarget)
            return null;
        logger($event)
    }
}

.self.prevent

on: {
    "click": function($event){
        if($event.target !== $event.currentTarget)
            return null;
        $event.preventDefault();
        logger($event)
    }
}

이들 2개의 코드 블록의 주요 차이점은 동작 순서가 중요하다는 사실에 있습니다..prevent.self자녀로부터 발생하는 이벤트를 방지하지만 코드를 실행하지는 않습니다..self.prevent는 직접 생성된 이벤트만 취소하고 하위 요청은 완전히 무시합니다.

데모:

var app = new Vue({
  el: '#appp',
  data: {log:[]},
  methods: {
    logger(arg) {
      this.log.push(arg);
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
  <form @submit.prevent="logger('form')" style="width: 50%;">
    <button>
      <p @click.prevent.self="logger('prevent.self')">
        prevent.self 
        <span>(child)</span>
      </p>
      <p @click.self.prevent="logger('self.prevent')"> 
        self.prevent 
        <span>(child)</span>
      </p>
      <p @click.prevent="logger('prevent')">  
        prevent 
        <span>(child)</span>
      </p>
      <p @click.self="logger('self')">  
        self
        <span>(child)</span>
      </p>
      <p @click="logger('none')"> 
        none 
        <span>(child)</span>
      </p>
    </button>
  </form>
  <pre style="width: 50%;">{{log}}</pre>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/48880786/vuejs-event-modifiers