將事件重定向到內部元素

Question

我有一個特殊的場景，我需要捕獲較高級別的關鍵事件，並將其重定向到較低級別。 我正在嘗試編寫這樣的代碼，但實際上似乎jQuery愚蠢地使用了完全相同的事件對象，因此target未更改，因此Maximum callstack size exceeded ...

$("#outer").on("keydown", function(evt) {
  if (evt.target !== $("#inner")[0] && !$.contains($("#inner")[0], evt.target)) {
    $("#inner").trigger(evt);
  }
});

帶有示例標記

<div id="#outer">
  <div id="#inner">
  </div>
</div>

將事件重定向到另一個元素的正確方法是什么？ 我當然可以手動“破解” target ，但是安全嗎？

我正在開發一個插件，該插件根據屏幕大小動態顯示菜單為彈出窗口或模態。 如果我有模式，則需要此鍵重定向。 消費者不應該知道它是彈出窗口還是模式。 我使用的是bootstrap的模式插件，該插件可捕獲由於“焦點鎖定事件”引起的關鍵事件，因此使它透明的唯一方法是將這些事件重定向到我的真實菜單。

Answer 1

您可以將事件處理程序附加到外部，並指定用於與事件匹配的選擇器：

$('#outer').on('keydown', '#inner', event => {
  /* this is executed when #inner is clicked */
});

如果您確實想使用觸發器，可以將其放在setTimeout中：

$('#outer').on('keydown', event => {
  if (yourCondition) {
    setTimeout(() => $('#inner').trigger(event), 0);
  }
});

Answer 2

該事件將冒泡，您是對的，這是同一事件。 這不是jQuery，而是實際上javascript的工作方式。 您可能想在子元素上設置一個偵聽器，並使用preventDefault（）;。

 $("#outer").on("keydown", doSomeThing); $("#inner").on("keydown", doSomeThingElse); function doSomeThing(e) { } function doSomeThingElse(e) { e.preventDefault(); } 

這將使您可以將偵聽器分成不同的功能。

Answer 3

謝謝大家的回答和評論。 有人建議在#inner div上阻止事件傳播。 我需要避免這種情況，我需要一種方法，使任何外部使用者都可以看到此事件，就像它是由#inner元素實際觸發的#inner 。

同時，我深入研究了jQuery源，並在trigger找到了這一行。

if ( !event.target ) {
    event.target = elem;
}

因此，當jQuery初始化要觸發的事件時，如果尚未指定target ，它只會將元素分配給target 。 確保他們對此行為有充分的理由，目前我無法看到。

因此，我能想到的最好的事情就是這樣的函數。

function redirectEvent(currentTarget, evt, newTarget) {
  if (currentTarget !== newTarget && !$.contains(currentTarget, newTarget)) {
    evt = $.Event(evt.type, evt);
    delete evt.target;
    $(newTarget).trigger(evt);
  }
}

就首次測試而言，我看不到任何副作用或缺點。