調用 vuejs 方法的 jQuery 全局按鍵事件方法無法按預期工作。 為什么？

Question

我有一個可以顯示多個 html 樣式對話框的網頁。 我想在一個地方有代碼，它可以感覺到按下了回車鍵，並調用與單擊對話框的“確定”按鈕調用的方法相同的方法。 這允許訪問者在對話框中按 Enter 鍵關閉它，而不必單擊“確定”按鈕。 很簡單的東西。

我將使用 jQuery 創建一個全局 keydown 處理程序，該處理程序查找輸入鍵並調用 vuejs dlogClose 方法。 我在下面創建了一個最小版本。 在現實生活中，會有多個對話框和更復雜的代碼來為特定對話框找到合適的 dlogClose 方法。 但是我刪除了該邏輯以創建一個最小的代碼示例，說明 Vue 的行為不符合預期。

單擊按鈕打開對話框。 然后單擊確定按鈕。 它會顯示一個警告，說“dlogClose 被調用”，然后它會關閉對話框。 完全按預期工作。

然后單擊按鈕再次打開對話框。 這次按回車鍵。 jQuery 全局事件處理程序將看到回車鍵並調用相同的 dlogClose 方法。 該方法將按預期顯示“dlogClose 調用”的警報，但它不會關閉對話框！ 什么？ 這是完全出乎意料的行為。

你能解釋為什么這種行為是有效的嗎？ 或者這是某種 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>

Answer 1

這里的問題是在對話框打開時按下回車鍵也會觸發打開對話框按鈕。 所以本質上，對話框是關閉的，然后立即重新打開。 使用 preventDefault 阻止這種情況發生。

$(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>

Answer 2

您可以在最頂層頁面組件（App 組件）中的 created() 方法中創建一個 jQuery 事件偵聽器。 在該頂級應用程序組件中，只要滿足您指定的條件，就可以在每次按下回車按鈕時觸發。 為簡單起見，您可以增加一個 vuex 狀態計數器或其他東西。 無論您擁有什么子組件，都可以觀察計數器的變化並做出相應的反應（同樣基於您設置的條件）。 我對調度不是很了解，但這可能是另一種調查途徑。