jQuery UI小部件工廠_on事件返回意外事件目標

我有一個小問題，理解jQuery Ui Widget工廠的事件處理。jQuery UI小部件工廠_on事件返回意外事件目標

看到這個剪斷：

$(function() { 

    $.widget("custom.superduper", { 
     _create: function() { 
      this._on($(this.element, "a"), { 
       click: function (event) { 
        console.log($(event.target)); 
       } 
      }); 
     } 
    }); 

    $("#gallery").superduper(); 
});

運行這個HTML：

<ul id="gallery"> 
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li> 
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li> 
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li> 
</ul>

工作演示：http://jsfiddle.net/ech2htrt/2/

當您單擊庫中的圖像上，控制檯輸出是：

對象[IMG 50×50]

我希望它是庫內部的<a>元件。當然，我可以使用closest()或parent()來獲得所需的元素，但感覺相當不自然。事件處理程序的定義在哪裏出錯？

有沒有更好的方法來獲取事件觸發元素？當我使用this或$(this)時，引用始終是小部件元素。

來源

2014-09-23 Nico O

據我瞭解，this._on($(this.element, "a"), { .... 這裏要附加上錨標記點擊事件和上下文應this.element。如果是這樣的論點是正確的misplaced.The爲了IS-

this._on($("a" , this.element), {

通過這樣做，如果我調試，並查看活動對象，我可以看到event.currentTarget是和event.delegatetarget也是。但是，作爲img標籤上面的錨標籤（z-index）event.target出來是img。

如果我增加錨標籤的高度和寬度，讓我點擊它周圍的img標籤，我會得到所需的結果。

來源

2014-09-23 14:25:12

輝煌。非常感謝你。這裏是你的修復程序的演示：http://jsfiddle.net/ech2htrt/3/ – 2014-09-23 14:30:02

你得到的是img而不是a，因爲即使你的選擇器是a，img是創建事件（事件源）的東西，它會起泡到你綁定的a。所以event.target將是img，而不是。如果你的a裏面沒有img，那麼event.target就是a了。同樣在你的處理程序中，這指的是小部件，因爲這是事件到達處理程序之前的最終目的地。我認爲你沒有選擇，只能使用最接近的（）。

見jquery cookbook，向上滾動至8.8

來源

2014-09-23 14:14:46 artm

非常感謝您的回覆。我會研究活動bubbeling並嘗試適應這個概念。我會稍微留下這個問題，看看其他人可能有不同的方法。 – 2014-09-23 14:22:08

jQuery UI小部件工廠_on事件返回意外事件目標

回答

相關問題