如何調試jQuery $ .proxy事件偵聽器？

技術

我使用jQuery 1.9.1和Twitter的引導2.3.1

語境

我目前面臨的Twitter的引導預輸入插件，阻止你進入一個bug當自動完成下拉列表打開時（和號返回鍵碼38，上箭頭鍵38），在輸入[type =「text」]中輸入「&」字符。

我希望能夠查看所有附加到輸入[type =「text」]的事件並找出造成問題的原因。

問題

// bootstrap typeahead plugin 
// bootstrap.js:2126 
this.$element 
    .on('focus', $.proxy(this.focus, this)) 
    .on('blur',  $.proxy(this.blur, this)) 
    .on('keypress', $.proxy(this.keypress, this)) 
    .on('keyup', $.proxy(this.keyup, this)) 

// bootstrap.js:2171 
move: function (e) { 
    if (!this.shown) return 

    switch(e.keyCode) { 
    case 9: // tab 
    case 13: // enter 
    case 27: // escape 
     e.preventDefault() 
     break 

    case 38: // up arrow 
     e.preventDefault() 
     this.prev() 
     break 

    case 40: // down arrow 
     e.preventDefault() 
     this.next() 
     break 
    } 

    e.stopPropagation() 
}

代理方法返回給定範圍內一個新的功能，因此使得它真的很難調試。

我在Chrome中發現了什麼 - 沒有幫助我的人

// Get event listeners on element 
getEventListeners($('[name="searchTerm"]')[0]) 

// Get the keydown event to see what's going on 
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener 

// Returns 
function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b} 

// <function scope> points back to the function above 
// ['<function scope>'] is an example 
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener['<function scope>']

我jQuery中發現了什麼 - 幫助我尷尬？

// Get event listeners on element 
// $element.data('events') is no longer supported. version >= 1.8 
$._data($('[name="searchTerm"]')[0], 'events') 

// Get the keydown event to see what's going on 
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler 

// Returns 
function(){return a.apply(c,f.concat(F.call(arguments)))} 

// <function scope> points to the correct function 
// ['<function scope>']['Closure']['a'] is an example 
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler['<function scope>']['Closure']['a'] 

// Returns 
function (e) { this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) this.move(e) }

問題

反正是有得到<功能範圍>和<關閉>方面出了javascript函數嗎？
是否有一種更簡單的方法來調試$ .proxy事件偵聽器在使用jQuery的DOM元素上觸發的內容？
有沒有更好的方法來調試這些事件？

謝謝！

來源

2013-06-01 chemoish

爲什麼不能在bootstrap-typeahead文件中放置斷點並使用開發人員工具欄來調試方法執行。從我所能看到的typeahead源代碼將有像'focus'和'keydown'這樣的方法。 –

我也不明白爲什麼'$ .proxy'使得它很難調試 –

@ArunPJohny你可以，但我有一個網站有超過50個不同的js文件，大約一半的javascript是內聯的。如果我已經知道問題所在，我可以在那裏放置斷點，但是我沒有。我想「發現」導致問題的原因。 – chemoish

您可以嘗試顯示jQuery事件處理程序的jQuery Debugger Chrome extension。 Firefox Nightly有一個similar feature。

來源

2014-08-15 21:01:59 niutech

只會顯示jQuery.proxy的代碼，而不是代理的功能代碼。 –

@JohanFredrikVaren不，它顯示了實際的事件處理程序，而不是jQuery代理代碼，請參閱[截圖]（http://i.imgur.com/SxLtgCg.png） – niutech

如何調試jQuery $ .proxy事件偵聽器？

回答

相關問題