事件目標應該是錨點，而不是圖像

Question

我正在使用Vanilla JS中的對話腳本。 我遇到了視頻圖像上的點擊事件的問題。 即使是艱難的圖像被錨標記包圍，它也會在“trigger-dialog-open”事件中將圖像顯示為event.target。

這是HMTL：

<a class="trigger-dialog--open thumbnail" data-dialog-id="dialog-video" href="javascript:;">
    <figure>
        <img src="http://i.ytimg.com/vi/id/sddefault.jpg" alt="" />
    </figure>
</a>

這是JS中的事件：

var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < openTriggers.length; i++) {
    openTriggers[i].addEventListener("click", function (event) {
        this.openDialog(event.target.getAttribute('data-dialog-id'));
    }.bind(this), false);
}

事件處理程序想要知道anchors數據屬性中的dialog-id。 無法找到它，因為它認為圖像是event.target，而不是實際的錨點。 我怎么能糾正這個？ 謝謝！

Answer 1

使用event.currentTarget 。 event.target應該是img元素，因為這是用戶點擊的內容。 然后點擊通過圖像的容器冒泡。 event.currentTarget為您提供了單擊處理程序實際綁定的元素。

（或者，如果你沒有綁定this到一些其他的對象，您可以使用this點擊處理程序中，它也應該是當前的目標。）

Answer 2

我有幾個問題是var openTriggers應該是模塊哈希的一部分嗎？ 因為如果它是全球，那么你不使用這個 ，你只加本 ，如果它引用的功能也被包含在一個變量，例如：

var aThing = {
   openTriggers: document.getElementsByClassName('trigger-dialog--open'),
   openModal: null,
   openDialog: function(clickedThingAttr){  
     if(this.openModal !== null){ 
        this.openModal.style.display = 'none';
     }else{ 
        this.openModal = document.getElementById(clickedThingAttr);
     }
     this.openModal = document.getElementById(clickedThingAttr);
     this.openModal.style.display = 'block';
   },
   setEventListenersNStuff: function(){
     for (var i = 0, n = this.openTriggers.length;i < n; i++) {
         this.openTriggers[i].addEventListener("click", function (event) {
            this.openDialog(event.target.getAttribute('data-dialog-id'));
         });
       };
    }

   };//end of aThing hash object
   aThing.setEventListenersNStuff();

這里有一些問題：1。你為什么使用.bind我認為這是一個jQuery的東西，你想在點擊一個對象時將一個字符串傳遞給另一個函數，根本不需要綁定。 2.還要確保如果你想做一些像打開模態的東西，除非它有點復雜，否則不需要調用另一種方法。 3.對於其他潛在的對話框，似乎當點擊.trigger-dialog-open時 ，你只是顯示一個帶有嵌入式id的模態，但是其他的呢？ 確保在打開新模態之前關閉所有模態，除非您希望打開10個模態。

需要注意的一點是：我添加了行var i = 0，n = openTriggers.length; i <n; i ++ ，現在在這種情況下它是愚蠢的優化，我聽說現代瀏覽器不適用，但解釋我添加它的原因，是因為我<openTriggers.length會計算並整合數組N次。 （這可能是一個過時的optmiziation）。

如果你的意思是全球性

下面我添加了一組不同的代碼，以防萬一你認為var openTriggers是全局的，有點像你上面寫的那樣。 我也使用querySelectorAll這就像jQuery的$（'。thing'）選擇器。

anyhoo，我還補充道

var openTriggers = document.querySelectorAll('.trigger-dialog--open');
var n = openTriggers.length;
function openDialog(ddId){ 
  for (var i = 0;i < n; i++) {
    openTriggers[i].style.display = 'none';

  };
  document.getElementById(ddId).style.display = 'block';
};
for (var i = 0;i < n; i++) {
    openTriggers[i].addEventListener("click", function (event) {
       openDialog(event.target.getAttribute('data-dialog-id'));
   });
}

}

因此，對於隱藏已經打開的模態的問題，我建議你可以在模塊中緩存打開的Dialog，或者你可以切換一個類，因為它需要額外的DOM搜索，效率會降低。 另外你可以添加一個if this.openModal.id === clickedThingAttr來隱藏如果打開，這樣你就有了一個切換功能。

無論如何我建議你閱讀這些東西，如果你想使用普通的JS，但想要jQuery的功能： http ： //blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and -start-使用原生

感謝您的時間。

Answer 3

你可以使用一個閉包

var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < this.openTriggers.length; i++) {
    (function(element) {
        element.addEventListener("click", function (event) {
            element.openDialog(event.target.getAttribute('data-dialog-id'));
        }, false)
    })(openTriggers[i]);
}