jQuery 글로벌 키 누르기 이벤트 메서드 호출 vuejs 메서드가 예상대로 작동하지 않습니다.왜요?

jQuery 글로벌 키 누르기 이벤트 메서드 호출 vuejs 메서드가 예상대로 작동하지 않습니다.왜요?

여러 html 형식의 대화상자를 표시할 수 있는 웹 페이지가 있습니다.입력 키를 누른 것을 감지하고 대화상자의 OK 버튼을 클릭하여 호출하는 것과 같은 메서드를 호출할 수 있는 코드를 한 곳에 배치하고 싶습니다.이렇게 하면 방문자는 OK 버튼을 클릭하는 대신 대화상자에서 Enter 키를 눌러 닫을 수 있습니다.꽤 간단한 것들이다.

jQuery를 사용하여 Enter 키를 검색하여 vuejs dlogClose 메서드를 호출하는 글로벌키다운 핸들러를 만듭니다.아래에 최소한의 버전을 작성했습니다.실제 환경에서는 특정 대화상자에 적합한 dlogClose 메서드를 찾기 위해 여러 대화상자와 더 복잡한 코드가 있습니다.그러나 Vue가 예상대로 동작하지 않는 최소한의 코드 예를 만들기 위해 이 논리를 삭제했습니다.

버튼을 클릭하여 대화상자를 엽니다.그런 다음 OK 버튼을 클릭합니다."dlogClose called"라는 경고가 표시되고 대화상자가 닫힙니다.예상대로 동작합니다.

그런 다음 버튼을 클릭하여 대화상자를 다시 엽니다.이번에는 Enter 키를 누릅니다.jQuery 글로벌이벤트 핸들러는 Enter 키를 인식하고 동일한 dlogClose 메서드를 호출합니다.이 메서드는 예상대로 "dlogClose called"라는 경고를 표시하지만 대화 상자를 닫지는 않습니다.뭐야? 전혀 예상치 못한 행동이야

왜 이런 행동이 유효한지 설명해 주시겠어요?아니면 vue 라이브러리의 버그 같은 건가요?

var app = new Vue({
    el: '#app',
    data: {
        dlogVisible: false
    },
    methods: {
        dlogClose: function () {
            alert("dlogClose called");
            app.dlogVisible = false;
        }

    },
    created: function () {
        $(document).keypress(function (e) {
            if (e.which == 13) {
                app.dlogClose();
            }
        });
    }
});

.dlog{
    height:200px; width:200px; border: solid 1px gray; 
    padding: 20px; box-shadow: 0px 3px 15px gray;
    position: absolute; top:40px; left:40px; background-color:white
}

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>

    <div>Global Enter Key Example</div>
    <br />
    <div id="app">
        <div class="dlog" v-if="dlogVisible">
            Pressing enter calls same method as clicking OK button<br />
            <br />
            <button type="button" v-on:click="dlogClose()">OK</button>
        </div>

        <button type="button" v-on:click="dlogVisible=true;">Open Dialog</button>
    </div>

여기서의 문제는 대화상자가 열려 있을 때 Enter 키를 누르면 대화상자 버튼도 열린다는 것입니다.즉, 대화 상자가 닫히고가 즉시 다시 열립니다.이를 방지하려면 prevent Default를 사용합니다.

$(document).keypress(function (e) {
  e.preventDefault()
  if (e.which == 13) {         
    app.dlogClose();
  }
});

업데이트된 코드는 다음과 같습니다.

var app = new Vue({
    el: '#app',
    data: {
        dlogVisible: false
    },
    methods: {
        dlogClose: function () {
            alert("dlogClose called");
            app.dlogVisible = false;
        }

    },
    created: function () {
        $(document).keypress(function (e) {
            e.preventDefault()
            if (e.which == 13) {
            
                app.dlogClose();
            }
        });
    }
});

.dlog{
    height:200px; width:200px; border: solid 1px gray; 
    padding: 20px; box-shadow: 0px 3px 15px gray;
    position: absolute; top:40px; left:40px; background-color:white
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>

    <div>Global Enter Key Example</div>
    <br />
    <div id="app">
        <div class="dlog" v-if="dlogVisible">
            Pressing enter calls same method as clicking OK button<br />
            <br />
            <button type="button" v-on:click="dlogClose()">OK</button>
        </div>

        <button type="button" v-on:click="dlogVisible=true;">Open Dialog</button>
    </div>

맨 위 페이지 구성 요소(App 구성 요소) 내에 생성된() 메서드로 jQuery 이벤트 리스너를 만들 수 있습니다.이 최상위 앱 컴포넌트에서는 지정한 조건을 만족할 때마다 입력 버튼을 누를 때마다 기동하는 방법을 만듭니다.간단하게 하기 위해 vuex 상태 카운터 등을 늘릴 수 있습니다.모든 하위 구성 요소가 카운터가 변경되고 그에 따라 반응하는 것을 관찰할 수 있습니다(설정된 조건에 따라).저는 디스패치에 대해 잘 모르지만, 다른 조사 경로일 수도 있습니다.

언급URL : https://stackoverflow.com/questions/46976829/jquery-global-keypress-event-method-calling-vuejs-method-doesnt-work-as-expecte