製作事件的標籤目標，而不是圖片

這可能是JavaScript 101，但我無法找出解決方案。考慮following fiddle 製作事件的標籤目標，而不是圖片

我的JS集上的一個標籤的單擊事件使用類.show-modal

，但我的控制檯日誌顯示事件目標竟是img標籤。我需要事件目標是各種原因的標籤。

這個

兩件事情提出了挑戰對我來說：

我已經成功地讓事件目標的唯一方法是一個標籤是img標籤之外呢分離（即使它成爲一個標籤的兄弟，而不是一個孩子），然後設置一個標籤的位置：絕對，給它的尺寸和位置在img上。我認爲這種方法是最不理想的，但我還能如何實現我的目標？
真正讓我困惑的是，事件目標與附加點擊事件的元素有什麼不同？他們不應該一樣嗎？如果它們應該是相同的，如果接收到點擊事件的元素不是我附加了我的點擊事件的元素，我的函數如何被調用？

來源

2013-08-02 max7

事件目標是觸發事件，不一定該處理程序被附接到該元件的元件。

當你點擊圖片時，事件在DOM樹上傳播，觸發綁定到anchor的click處理程序。

如果您需要anchor，您可以使用this。

來源

2013-08-02 07:39:34 billyonecan

我知道它與事件傳播有關，我只是不完全確定它是如何實現的。我不認爲我可以使用「this」，因爲我需要確定哪個標籤被點擊，然後找到附加的特定數據屬性。 – max7

@ max7：我敢肯定你可以使用'this'，它不會是目標，但它肯定會是''anchor''，它對應於點擊'img'。看看這個[fiddle]（http://jsfiddle.net/FvHU9/7/） – billyonecan

非常感謝這個優秀的小提琴！所以基本上，因爲綁定我的點擊處理程序的標籤在冒泡階段攔截了該事件，這允許我使用「this」並在標籤上獲得正確的數據attrs ...我得到的是正確的嗎？ – max7

您可以使用this而不是目標：DEMO

$(document).ready(function(){ 
    $('.show-modal').on('click',function(e){ 
     console.log(this); 
    }); 
});

來源

2013-08-02 07:39:01

我不認爲我可以用「這個」自我需要找到附帶點擊處理程序的實際標籤，以便我可以找到附加的特定數據屬性。 – max7

@ max7：'this'將作爲點擊處理程序所附的元素 – billyonecan

使用

e.currentTarget - 給予該事件被綁定的元素。（同樣可以使用這個）

e.target - 給出觸發事件的元素。

Check Fiddle

這裏的問題是你的形象幾乎完全佔據了錨。所以anchor標籤將永遠不會是e.target ..

查看一個高度不同的例子。

Check Fiddle

來源

2013-08-02 07:39:11

正是我需要的 - 謝謝。 – Banago

該事件被觸發上img標籤，但聽者的背景與show-modal類標籤，因此回調背景下會裏的聽衆被附：

$('.show-modal').on('click', function(e) 
{ 
    console.log(e.target); 
    console.log($(this));//the .show-modal tag 
});

這就是全部。要是你發現自己委派的事件，並要檢查，如果點擊的元素是一些元素的ID爲X，或類子Y：

$(document).on('click','img',function(e) 
{//this catches all clicks on all imgs in your page 
    console($(this) === $(document));//true 
    console.log(e.target);//img tag 
    if ($(e.target).closest('.show-modal')) 
    { 
     console.log('yes, clicked image is child of .show-modal element'): 
    } 
});

來源

2013-08-02 07:39:38

製作事件的標籤目標，而不是圖片

回答

相關問題